Question

我一直在四处寻找解决方案，我找不到任何解决方案。我在这里要做的是获取第三列值，即选中第一列中的复选框时的价格。我最终会使用列值来计算将被抛入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（）的选项，但我似乎没有得到“这个”如何工作

示例代码：

$(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的新手。

Answer 1

您需要定位最后一个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类来定位元素而不是使用索引。}

HTML 的

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

脚本

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

Answer 2

您可以将siblings与last这样使用。

  $(this).parent().siblings(":last").text();

Answer 3

使用需要使用closest()查找tr然后使用find :nth-child()来获取特定的td

$(document).ready(function(){
    $('.chkbx').change(function(){
    var total = 0;
    $('.chkbx:checked').each(function(){
        total+=parseInt($(this).closest('tr').find("td:nth-child(3)").text());
    });
    //var item=$(".chkbx tr:nth-child(2)").text();
    $("#container").text(total);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<span id='container'> </span>

Answer 4

您没有正确跟踪javafx.deploy.includeDT=false列的TD，您需要在price之外声明总变量，否则范围将不允许访问变量并填充总数，请参阅下面的演示

.each()

var total = 0;
$(document).ready(function() {
  $('.chkbx').change(function() {

    $('.chkbx:checked').each(function() {
      //console.log($(this).parent().next().next().text());
      total += parseInt($(this).parent().next().next().text());
    });

    //var item=$(".chkbx tr:nth-child(2)").text();
    $("#container").html(total);
  });
});

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

4 个答案: