javascript jQuery - 获取表格单元格值

jQuery - Get table cell value

提问by SuperDJ

I have a table which looks like the following. The price normally comes from a database this is just for showing the problem I have.

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

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

What I would like to do is: when the user types a number in the field ticketsit should update the field sub_total. With the jQuery I have this is not working. When I alert(price)I get undefined. So I wonder how to make the sub_totalfield with auto updated values. It might also be interesting to know that I have more rows like this beneath this row. So the script should only update the field from one specific row at a time.

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

What I already tried but without success: 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

我已经尝试过但没有成功： How to get a table cell value using jQuery; 如何使用jQuery获取表格单元格值？; 如何使用jquery获取表格中任何位置的表格单元格值

Thanks in advance.

提前致谢。

采纳答案by Keith.Abramo

You need to do traverse back up to the parent tr element before you try to find the .sub_title or .price elements.

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

回答by Anoop Joshi

Change you code like this

像这样改变你的代码

$(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()will search for the children. So you should get into the parent trfirst before using find().

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

You can use closest("tr")to get the parent trelement

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

回答by Irvin Dominin

It's because priceand sub_totalare not children of the current element (as findis selecting):

这是因为price并且sub_total不是当前元素的子元素（就像find选择一样）：

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

they are siblings of its parent or more simply children of the container tr.

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

Try instead:

试试吧：

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

回答by IfThenElse

example for a

一个例子

<table id="#myTable">

I write this:

我这样写：

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