javascript - 列中的 Jquery Keyup

Question

我创建了一个表，对列和行进行求和。我遇到的问题是:

当我单击“+”按钮时，我可以对行求和，但列有问题。 我认为这是 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>');
    });

DEMO JSFIDDLE

Answer 1

我更改了 fiddle 中的 + 按钮点击

$("#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 >');

});

Demo

编辑 您需要对新创建的文本框 keyup 事件使用 on 委托(delegate)，

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

Updated fiddle

编辑

$("#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>");


});

Working fiddle