我到处都在寻找解决方案，但找不到。
我在这里尝试做的是获取第三列的值，即选中第一列中的复选框时的价格。最终，我将使用列值来计算将被放入div中的总数。
<body>
<form action="" method="post"><table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td><td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>
</form>
<div id="container"></div>
</body>
我已经尝试过$（this）.parent（）。find（）....和nth-child（）的几个选项，但是我似乎并没有理解“ this”的工作方式
样例代码：
$(document).ready(function(){
$('.chkbx').change(function(){
$('.chkbx:checked').each(function(){
total+=parseInt($(this).parent().find("td").text());
});
//var item=$(".chkbx tr:nth-child(2)").text();
$("#container").html(total);
});
});
我的方法错了吗？我应该怎么做？使用类会有帮助吗？
提前致谢！！
附注：对于JS和JQuery来说是非常新的东西。
最佳答案
您需要定位最后一个td元素，以便可以使用.closest()向上移动到<TR>然后使用.eq(index) 1定位所需的元素
total+= parseInt($(this).closest('tr').find("td:eq(2)").text(), 10);
$(document).ready(function() {
$('.chkbx').change(function() {
var total = 0;
$('.chkbx:checked').each(function() {
total += parseInt($(this).closest('tr').find("td:eq(2)").text(), 10);
});
console.clear();
console.log(total);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableid">
<tr>
<th><b>Menu:</b></th>
</tr>
<tr>
<th></th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="27"></td>
<td>Item1</td>
<td class="">100</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="28"></td>
<td>Item2</td>
<td class="">200</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="29"></td>
<td>Item3</td>
<td class="">300</td>
</tr>
<tr>
<td><input type="checkbox" class="chkbx" name="item" value="30"></td>
<td>Item4</td>
<td class="">400</td>
</tr>
</table>1我建议，分配一个CSS类来定位元素而不是使用索引。
的HTML
<td class="price">400</td>
脚本
total+= parseInt($(this).closest('tr').find("td.price").text(), 10);
关于javascript - 选中当前行复选框时获得不同的列值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47387541/