jQuery&；内容可编辑属性

我有一个正在处理的测试用例，我正在尝试动态更新总计。如果contenteditable单元格发生更改，则total.sum单元格将根据行单元格总计更新总计

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

1.
2.
3.

下面是我的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);

 });

})();

（函数（）{
$（'tr'）。每个（函数（）{
var总和=0；
$（'td'，this）.each（函数（）{
var cellNum=$（this.text（）；
sum+=parseInt（cellNum，10）；
});
var总计=''+总和+''；
$（此）。追加（总计）；
});
})();

您可以收听

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);
    });
}

---

请注意，如果添加非数值，则总值将是NaN（不是数字）值。你可以使用

isNaN（）

函数来改进你的代码。

你的问题是什么？我正在玩contenteditable。添加td类总和，对三列求和。但是如果我更改第一个单元格中的数字，我希望var total单元格在更改后更新。这有意义吗？很好，谢谢。但我需要的一件事是，将行和列添加到一起的列将显示在页面加载中。我将进一步研究这段代码，看看我能做些什么，以便将包含总计的单元格追加到每一行。再次感谢你。