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);
});
})();
答
您可以收听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()
功能并改进您的代码。
+0
这很好,谢谢。我需要的一件事是为列添加行列,以便在页面加载时显示。我会更多地查看这段代码,看看我能做些什么,以便将总计的单元格追加到每行中。再次感谢你。 – pertrai1 2013-03-02 15:57:10
你的问题是什么? – undefined 2013-03-02 02:13:19
我在玩contenteditable。添加td类的总和,将三列相加。但是如果我在第一个单元格中更改数字,我希望更改后更新var总单元格。那有意义吗? – pertrai1 2013-03-02 02:21:48