Question

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

$(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

提前致谢。

Answer 1

像这样改变你的代码

$(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()将搜索孩子。因此，在使用tr之前，您应先进入父find()。

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

Answer 2

在尝试查找.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);
    }));
});

Answer 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();

jQuery - 获取表格单元格值

3 个答案: