Javascript 选中“当前行”复选框时获取不同的列值_Javascript_Jquery

Javascript 选中“当前行”复选框时获取不同的列值

javascript jquery

Javascript 选中“当前行”复选框时获取不同的列值,javascript,jquery,Javascript,Jquery,我一直在到处寻找解决办法，但就是找不到。这里我要做的是，当选中第一列中的复选框时，获取第三列的值，即price。我最终将使用列值来计算将被抛出到div中的总数 <body> <form action="" method="post"><table id="tableid"> <tr> <th><b>Menu:</b></th> <

我一直在到处寻找解决办法，但就是找不到。这里我要做的是，当选中第一列中的复选框时，获取第三列的值，即price。我最终将使用列值来计算将被抛出到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>

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

提前谢谢！！

注：对JS和JQuery来说非常陌生。

您需要以最后一个

td

元素为目标，这样您就可以使用

.closest（）

遍历到

，然后使用

.eq（index）

1以所需元素为目标

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

$（文档）.ready（函数（）{
$（'.chkbx'）.change（函数（）{
var合计=0；
$（'.chkbx:checked'）。每个（函数（）{
total+=parseInt（$（this）.closest（'tr'）.find（“td:eq（2）”）.text（），10）；
});
console.clear（）；
控制台日志（总计）；
});
});

菜单：
项目
价格
项目1
100
项目2
200
项目3
300
项目4
400
您可以像这样将兄弟姐妹
与最后一个
一起使用
  $(this).parent().siblings(":last").text();

使用需要使用最近的（）
来查找tr，然后使用find with：nth-child（）
来获取特定的td

$（文档）.ready（函数（）{
$（'.chkbx'）.change（函数（）{
var合计=0；
$（'.chkbx:checked'）。每个（函数（）{
total+=parseInt（$（this.closest（'tr'）.find（“td:nth child（3）”）.text（））；
});
//var item=$（“.chkbx tr:nth child（2）”）.text（）；
$（“#容器”）.text（总计）；
});
});

菜单：
项目
价格
项目1
100
项目2200
项目3
300
项目4
400
您没有正确跟踪price
列的TD
，您需要在之外声明总计变量。each（）
否则作用域将不允许访问变量并填充总计，请参阅下面的演示

var总计=0；
$（文档）.ready（函数（）{
$（'.chkbx'）.change（函数（）{
$（'.chkbx:checked'）。每个（函数（）{
//log（$（this.parent（）.next（）.next（）.text（））；
total+=parseInt（$（this.parent（）.next（）.next（）.text（））；
});
//var item=$（“.chkbx tr:nth child（2）”）.text（）；
$（“#container”）.html（总计）；
});
});

全部的
菜单：
项目
价格
项目1
100
项目2
200
项目3
300
项目4
400
parseInt（$（this）.closest（'tr'）.find（“td:eq（2）”）.text（），10）
  $(this).parent().siblings(":last").text();