我创建了一个表,总和列和行。我遇到的问题是:
当我单击“+”按钮时,我可以对行进行求和,但我的列有问题。我认为这是KeyUp的一个问题,但我不知道。
这是对列进行求和的代码:
$('#sum_table tr:not(.totalCol) input:text').bind('keyup change', function() {
var $table = $(this).closest('table');
var total = 0;
var thisNumber = $(this).attr('class').match(/(\d+)/)[1];
$table.find('tr:not(.totalCol) .sum'+thisNumber).each(function() {
total += parseInt(this.value);
});
$table.find('.totalCol td:nth-child('+thisNumber+')').html(total);
});
增加行和列的代码:
$("#tabla").click(function () {
$("tr").find("td:last").before('<td><input type="text" value="0"></td>');
var linea = $('tr:first').html();
$('tr:last').before('<tr>'+linea+'</tr>');
$('tr').last().find("td").last.html('<td>hola</td>');
});
我已经改变了你的小提琴中的+
按钮点击
$("#tabla").click(function () {
$("#sum_table tr:last-child").before('<tr><td><input type="text" value="0"></td><td><input type="text" value="0"></td><td><input type="text" value="0"></td><td class="total"> 0 </td></tr >');
});
编辑您需要为新创建的文本框keyup事件使用on
委托,
$(document).on('keyup change', '#sum_table tr:not(.totalCol) input:text', function () {
var $table = $(this).closest('table');
var total = 0;
var thisNumber = $(this).attr('class').match(/(\d+)/)[1];
$table.find('tr:not(.totalCol) .sum' + thisNumber).each(function () {
total += parseInt(this.value);
});
$table.find('.totalCol td:nth-child(' + thisNumber + ')').html(total);
});
编辑
$("#tabla").click(function () {
$("#sum_table tr:last-child").before("<tr>" + $("#sum_table tr:eq(0)").html() + "</tr>");
$("tr:not(:last-child)").each(function () {
var classname = $(this).find("td:last-child").index() + 1;
$(this).find("td:last-child").before('<td><input class="sum' + classname + '" type="text" value="0"></td>');
});
$("#sum_table tr:last-child").append("<td>0</td>");
});