Question

我有以下表结构：

<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>

我想要做的是自动计算每列和每行的总和。

我设法写了一个jQuery脚本来计算每列的总和，通过添加colX（其中X是列的编号）作为我想要求和的列的类，但我不知道如何这样做是为了行。

这是我的剧本：

$('#activity_table tr:not(.total) input:text').bind('keyup change', function() {
var $table = $(this).closest('table');
var total = 0;
var thisNumber = $(this).attr('class').match(/(\d+)/)[1];

$table.find('tr:not(.total) .col'+thisNumber).each(function() {
    total += +$(this).val();
});

thisNumber++;
$table.find('.total td:nth-child('+thisNumber+') input').val(total);
});

Answer 1

我调整了你的HTML。拥有所有行/列总数的类允许您一次选择它们。避免选择具有正则表达式的元素，因为这将非常慢。如有必要，您可以使用两个类，如column column123，它允许您按类名选择组或单个项目。要快速访问元素中的索引，我使用data-属性。如果元素是由jQuery代码生成的，您还可以使用JavaScript数据对象（＆＃34;哈希＆＃34;）或jQuery的.data()。

<html>
<head>
<script src="jquery.js"></script>
<script>
var rows = 3;
var cols = 2;

$( function() {
    var grand_total = 0;
    var row_totals = {};
    var col_totals = {};

    // I think there should be better approaches on initializing these
    for( var row = 1; row <= rows; row++ ) { row_totals[ row ] = 0 }
    for( var col = 1; col <= cols; col++ ) { col_totals[ col ] = 0 }

    $('input').each( function() {
        var $this = $(this);
        var val = $this.val() * 1; // the multiplication is to prevent string concatenation

        row_totals[ $this.attr('data-row') ] += val;
        col_totals[ $this.attr('data-col') ] += val;
        grand_total                          += val;
    } );

    $('.total.row').each( function() {
        var $this = $(this);
        $this.text( row_totals[ $this.attr('data-row') ] );
    } );

    $('.total.col').each( function() {
        var $this = $(this);
        $this.text( col_totals[ $this.attr('data-col') ] );
    } );

    $('.grand_total').text = grand_total;
} );
</script>
</head>
<body>

<table>
<tr>
<td class="total row" data-row="1"></td>
<td><input data-row="1" data-col="1" type="text" value="1">
<td><input data-row="1" data-col="2" type="text" value="2">
</tr>
<tr>
<td class="total row" data-row="2"></td>
<td><input data-row="2" data-col="1" type="text" value="3">
<td><input data-row="2" data-col="2" type="text" value="4">
</tr>
<tr>
<td class="total row" data-row="3"></td>
<td><input data-row="3" data-col="1" type="text" value="5">
<td><input data-row="3" data-col="2" type="text" value="6">
</tr>
<tr>
<td class="grand_total"></td>
<td class="total col" data-col="1"></td>
<td class="total col" data-col="2"></td>
</tr>
</table>

</body>
</html>

Answer 2

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

<小时/> 下面的代码获取每列的总数。

它的工作原理是抓住第2行（cellIndex）上每个td的{{1}}，其中不是第一列或最后一列。然后，它会对除第一行之外的行匹配tr:eq(1)的所有td进行过滤。如果有cellIndex元素，则将其值添加到运行总计中。否则，我们会在列中的最后一个单元格中获取总值。

input

<小时/> 下面的代码获取每行的总数。

它遍历每一行，总计其$('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); } } }); });元素。

input

<小时/> 请注意，on现在优先于bind。如果从总计列和总计行中删除

$('#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);
});

，则事件处理程序会简化为：

input

我建议将所有样式移动到样式表。我已经在我的小提琴中这样做了：

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

2 个答案:

Fiddle