Question

我正在研究一个测试用例，如果更改了一个可信任的单元格，我试图动态更新总数。总的.sum单元格将从行单元格总数中更新总数。

<table cellspacing="2">
 <tr>
  <td contenteditable="true">1</td>
  <td>2</td>
  <td>3</td>
 </tr>
</table>

下面是我的jQuery

(function() {

 $( 'tr' ).each(function() {
  var sum = 0;

   $( 'td', this ).each(function() {
    var cellNum = $(this).text();
    sum += parseInt(cellNum, 10);
   });

   var total = '<td class="sum">' + sum + '</td>';

   $( this ).append(total);

 });

})();

Answer 1

您可以收听blur或keyup或input事件。如果使用append方法，则会得到意外结果，即上次计算的结果将添加到当前结果中，我假设您向每行添加另一个td。

$('table').on('blur', 'td[contenteditable]', cal);

function cal() {
    $('tr').each(function () {
        var sum = 0;
        $('td:not(.total)', this).each(function () {
            var cellNum = $(this).text();
            sum += parseInt(cellNum, 10);
        });
        $('td.total', this).text(sum);
    });
}

http://jsfiddle.net/td5Hm/

请注意，如果添加非数字值，则总值将为NaN（非数字）值。您可以使用isNaN()功能并改进代码。

jQuery＆amp; ContentEditable属性

1 个答案: