jquery - jQuery & ContentEditable 属性

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()函数并改进您的代码。