用于对行和列的值求和的jQuery脚本

我有以下表格结构：

<table width="960" border="1" align="center" id="activity_table">
<tr>
    <td width="192">Activity</td>
    <td width="192" align="center">Option 1</td>                        
    <td width="192" align="center">Option 2</td>
    <td width="192" align="center">Total</td>
</tr>
<tr>
    <td>Activity 1</td>
    <td align="center">
        <input type="text" name="activity_1_option_1" id="activity_1_option_1" value="0" class="col1" size="10" />
    </td>                        
    <td align="center">
        <input type="text" name="activity_1_option_2" id="activity_1_option_2" value="0" class="col2" size="10" />
    </td>
    <td align="center">
        <input type="text" name="activity_1_total" id="activity_1_total" value="0" class="" size="10" readonly />
    </td>
</tr>
<tr>
    <td>Activity 2</td>
    <td align="center">
        <input type="text" name="activity_2_option_1" id="activity_2_option_1" value="0" class="col1" size="10" />
    </td>                        
    <td align="center">
        <input type="text" name="activity_2_option_2" id="activity_2_option_2" value="0" class="col2" size="10" />
    </td>
    <td align="center">
        <input type="text" name="activity_2_total" id="activity_2_total" value="0" class="" size="10" readonly />
    </td>
</tr>
<tr>
    <td>Activity 3</td>
    <td align="center">
        <input type="text" name="activity_3_option_1" id="activity_3_option_1" value="0" class="col1" size="10" />
    </td>                        
    <td align="center">
        <input type="text" name="activity_3_option_2" id="activity_3_option_2" value="0" class="col2" size="10" />
    </td>
    <td align="center">
        <input type="text" name="activity_3_total" id="activity_3_total" value="0" class="" size="10" readonly />
    </td>
</tr>
<tr class="total">
    <td>Total</td>
    <td align="center">
        <input type="text" name="total_activity_1" id="total_activity_1" value="0" class="" size="10" readonly />
    </td>                        
    <td align="center">
        <input type="text" name="total_activity_2" id="total_activity_2" value="0" class="" size="10" readonly />
    </td>
    <td align="center">
        <input type="text" name="grand_total" id="grand_total" value="0" class="" size="10" readonly />
    </td>
</tr>                        

---

我稍微修改了你的HTML。将类用于所有行/列合计允许您一次选择它们。避免使用正则表达式选择元素，因为这将非常缓慢。如有必要，您可以使用两个类，如column123列，它允许您按类名选择组或单个项。为了快速访问元素的索引，我使用数据属性。如果元素是由jQuery代码生成的，那么还可以使用JavaScript数据对象哈希或jQuery的.data

---

可以在不引用表中的任何类、名称或ID的情况下执行此操作

下面的代码获取每列的总数

它的工作原理是获取第2行tr:eq1上每个td的cellIndex，这不是第一列或最后一列。然后，它使用除第一行之外的行上的匹配cellIndex过滤所有tds。如果有一个输入元素，它的值将被添加到运行总数中。否则，我们将位于列中的最后一个单元格，它将获取总值

$('td:not(:first-child):not(:last-child)',
  '#activity_table tr:eq(1)').each(function() {
  var ci= this.cellIndex;
  var total = 0;
  $('td', 
    '#activity_table tr:gt(0)')
    .filter(function() {
      return this.cellIndex === ci;
    })
    .each(function() {
      var inp= $('input', this);
      if(inp.length) {
        if(!$(this).closest('tr').is(':last-child')) {
          total+= $('input', this).val()*1;
        }
        else {
          $('input', this).val(total);
        }
      }
    });
});

下面的代码获取每行的总数

它遍历每一行，合计其输入元素

$('#activity_table tr:gt(0)').each(function() {
  var total = 0;
  $('td:not(:first-child):not(:last-child)',
    this).each(function() {
    total+= $('input', this).val()*1;
  });
  $('input', this).last().val(total);
});

请注意，现在首选的是。如果从“总计”列和“总计”行中删除输入，则事件处理程序将简化为：

$('#activity_table input').on('keyup change',...

我建议将所有样式移动到样式表中。我在小提琴里这样做过：

---

您知道在JavaScript上下文中，您事先有多少活动和选项吗？那将非常有用。是的，我知道选择和活动的确切数量。事实上，这张桌子要大得多，我只是为这个问题粘贴了一个样本。谢谢你，丹尼尔，但我似乎无法让它工作。控制台中没有错误，但也没有总数。稍后编辑：似乎行_总计[$this.attr'data-row']+=+val；应该是行总数[$this.attr'data-row']+=val；。另外$this.text行_总计[$this.attr'data-row']；必须是$this.val row_totals[$this.attr'data-row']；。在按照上面所写的方式修改代码之后，总计输入被诸如010101010之类的值填充，因此我认为总和计算不正确。哦，该页面中还有其他表，因此将jQuery代码放入$'activity_table input:text'。绑定'keyup change'，函数{}；是的，你必须使代码适应你的实际软件。我只是想展示一种有用的方法。+val的问题是JavaScript很难区分数字和字符串变量。我用加号表示一个正数。这在Firefox中是有效的。你使用哪种浏览器？我会用一个真正的总数来编辑。你好，瑞克！很好的解决方案！遗憾的是，我必须使用我第一篇文章中所示的输入。我是一个jQuery新手，您可能已经从我的代码示例中注意到了这一点。您能否更新该小提琴以使用显示总计的输入？谢谢，谢谢你，瑞克！我知道它在你的例子中工作得很好，但是当我在我的应用程序中移动代码时，我在底部总计的输入中得到NaN值。你知道为什么吗？我没有对您的代码做任何更改，唯一的区别是实际表有更多的行和列。我看到了问题所在。Pachet de raportări所在的行没有任何输入框。我已经更新了我的答案和我的提琴。这是一个更新提琴，没有最后一列，有一个按钮可以在总计行之前插入新行。它还更改要委派的密钥更新更改事件，以便可以动态创建输入：

$('#activity_table tr:gt(0)').each(function() {
  var total = 0;
  $('td:not(:first-child):not(:last-child)',
    this).each(function() {
    total+= $('input', this).val()*1;
  });
  $('input', this).last().val(total);
});

$('#activity_table input').on('keyup change',...