jquery - JQuery在给定列名的情况下添加列的值

Question

假设我有一张桌子：

    <table id="myTable">
    <thead>
    <th> Col1 </th>
    <th> Col2 </th>
    </thead>
    <tbody>
       <tr><td>1</td><td>2</td></tr>
       <tr><td>1</td><td>2</td></tr>
    </tbody>
    </table>

我想在名为Col2的列中添加值，即 4。我不想按列的位置添加值，这在此处回答，因为列的位置是可变的。

Answer 1

我建议如下：

var colNum = $('th').filter(function(){
                 return $(this).text().trim() == 'Col2';
             }).index(),
    sum = 0;

$('tbody tr').each(
    function(i){
        colValue = $(this).find('td').eq(colNum).text();
        sum += parseInt(colValue);
    });

JS 小提琴演示。

参考：

• each().
• eq().
• filter().
• find().
• index().
• parseInt().
• text().
• trim().

Answer 2

您可以使用

var columnIndex = $("#myTable th").index(":contains('Col2')");

从那里，您可以使用您在问题中链接的代码段来收集总和并将结果输出到某个总单元格。

var sum = 0;
$("#myTable tbody tr").each(function() {
    var td = $("> td", this).eq(columnIndex);
    sum += td.text() | 0;
});

注意：x | 0是转换为整数的一个小技巧。

Answer 3

var index = $('table th:contains(Col2)').index(),   // get index of th
    sum = 0;
$('table tbody tr').each(function() {
    sum += parseInt( $.trim( $('td:eq('+ index +')', this).text() ), 10);
});

一点解释

---

• $('td:eq('+ index +')', this).text()获取对应td的文本

• $.trim( $('td:eq('+ index +')', this).text() )从文本中删除空格

• parseInt( $.trim( $('td:eq('+ index +')', this).text() ), 10)转换整数的值

• sum += parseInt( $.trim( $('td:eq('+ index +')', this).text() ), 10);执行总和。

演示