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