javascript - 选中当前行复选框时获取不同的列值

我到处寻找解决方案，但找不到任何解决方案。我在这里尝试做的是获取第三列值，即选中第一列中的复选框时的价格。我最终将使用列值来计算将放入 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);
    });
});

我的做法是不是错了？我该怎么办？使用类会有帮助吗？

提前致谢!! P.S:对 JS 和 JQuery 非常陌生。

最佳答案

您需要定位最后一个 td元素，以便您可以使用 .closest()遍历到 <TR>然后使用.eq(index) ¹ 定位所需元素

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>

¹_{我建议分配一个CSS类来定位元素而不是使用index.html。}

HTML

<td class="price">400</td>

脚本

total+= parseInt($(this).closest('tr').find("td.price").text(), 10);

关于javascript - 选中当前行复选框时获取不同的列值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47387541/

javascript - 选中当前行复选框时获取不同的列值

上一篇：javascript - 内容丢失和完整版 CKEditor 5

下一篇：javascript - 创建按钮 JqGrid