jQuery - 获取表格单元格值答案

【问题标题】：jQuery - Get table cell valuejQuery - 获取表格单元格值
【发布时间】：2014-09-10 11:17:50
【问题描述】：

我有一张如下所示的表格。价格通常来自数据库，这只是为了显示我遇到的问题。

$(document).ready(function() {
    $(document).delegate('.amount input[type="text"]','keyup',(function() {
        var $this = $(this);
        var sub_total = $this.find('.sub_total');
        var price = $this.find('.price').text();
        var amount = $this.val();
        alert(price);
    }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
      <td><input type="text" name="tickets" id="tickets" class="amount" maxlength="2" autocomplete="off"></td>
      <td>Ticket:</td>
      <td class="price">20,50</td>
      <td class="sub_total"></td>
  </tr>
</table>

我想做的是：当用户在字段tickets 中输入一个数字时，它应该更新字段sub_total。使用 jQuery 我有这不起作用。当我alert(price) 我得到undefined。所以我想知道如何使 sub_total 字段具有自动更新的值。知道我在这一行下面有更多这样的行可能也很有趣。所以脚本一次只能更新一个特定行的字段。

我已经尝试过但没有成功： How to get a table cell value using jQuery; How to get a table cell value using jQuery?; How to get table cell values any where in the table using jquery

提前致谢。

【问题讨论】：

使用'input[type="text"].amount'而不是'.amount input[type="text"]'通知空间被删除
你应该使用on()而不是delegate()。

标签： javascript jquery

【解决方案1】：

在尝试查找 .sub_title 或 .price 元素之前，您需要遍历父 tr 元素。

$(document).ready(function() {
    $(document).delegate('.amount input[type="text"]','keyup',(function() {
        var $this = $(this);
        var $tr = $this.closest("tr");
        var sub_total = $tr.find('.sub_total');
        var price = $tr.find('.price').text();
        var amount = $this.val();
        alert(price);
    }));
});

【讨论】：

【解决方案2】：

像这样改变你的代码

$(document).ready(function() {
    $(document).on('input[type="text"].amount', 'keyup', (function() {
        var $this = $(this);
        var sub_total = $this.closest("tr").find('.sub_total');
        var price = $this.closest("tr").find('.price').text();
        var amount = $this.val();
        alert(price);
    }));
});

find() 将搜索孩子。所以你应该在使用find()之前先进入父tr。

您可以使用closest("tr") 获取父tr 元素

【讨论】：

【解决方案3】：

这是因为price 和sub_total 不是当前元素的子元素（因为find 正在选择）：

var sub_total = $this.find('.sub_total');
var price = $this.find('.price').text();

它们是其父级的兄弟姐妹或更简单的容器tr 的子级。

试试吧：

var sub_total = $this.closest('tr').find('.sub_total');
var price = $this.closest('tr').find('.price').text();

【讨论】：

【解决方案4】：

示例

<table id="#myTable">

我写这个：

function setCell( idTab, row, col, text) {
  var idCel = idTab + " tbody tr:nth-child(" + row + ") td:nth-child(" + col + ")";
  $(idCel).html(text);
}

function getCell( idTab, row, col ) {
  var idCel =idTab + " tbody tr:nth-child(" + row + ") td:nth-child(" + col + ")";
  return $(idCel).html();
}

setCell( "#myTab", 3, 4, "new value" );
alert( getCell("#myTab", 3, 4);

【讨论】：

如您所见，这个问题已经存在 2 年了，并且当时已经得到了回答。这些功能也不足以解决我遇到的问题。