jQuery和ContentEditable属性

我有一个测试案例，我正在努力，我试图动态更新总数，如果contenteditable单元格更改，总.sum单元格将更新总行数单元总计。jQuery和ContentEditable属性

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

}); 

})();

来源

2013-03-02 pertrai1

你的问题是什么？ – undefined 2013-03-02 02:13:19

我在玩contenteditable。添加td类的总和，将三列相加。但是如果我在第一个单元格中更改数字，我希望更改后更新var总单元格。那有意义吗？ – pertrai1 2013-03-02 02:21:48

您可以收听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()功能并改进您的代码。

来源

2013-03-02 02:35:17 undefined

这很好，谢谢。我需要的一件事是为列添加行列，以便在页面加载时显示。我会更多地查看这段代码，看看我能做些什么，以便将总计的单元格追加到每行中。再次感谢你。 – pertrai1 2013-03-02 15:57:10

jQuery和ContentEditable属性

回答

相关问题