如何使用jQuery动态计算追加表行

我是jQuery的新手，我被卡住了。 我正在动态地向jQuery表添加行。我想计算每一行（长*宽）=行总数 我想对每一列求和，并在表的底部显示一个总计

当用户在倒数第二个宽度输入中输入一个数字时，我还希望动态添加一个新行。所以我不必点击按钮

我已经知道了如何将行追加到表中，但无法使计算正常进行。 这是我的作品，还有一个

是添加行的内容。我更喜欢让它动态添加行，而不需要单击按钮

这就是我用来计算的

$(document).ready(function () {
$('.calculation').change('click', function() {
    $('.turf').find('tbody').find('tr').each(function() {
        var l = $(this).find('input.length').val();
        var w = $(this).find('input.width').val();
        var dateTotal = (l * w);
        $(this).find('input.row-total').val(dateTotal);
    }); //END .each
    return false;
}); // END click 
});

---

我还有另一段计算代码，但它被注释掉了，因为我试图在两段不同的代码之间切换时迷失了方向。

您需要将事件委托给容器，然后使用类指向动态添加的对象。此外，它是

.on（“单击”、…）

（按钮、单选框或复选框）或

。on（“更改”、…）

（选择或文本字段）不是

。更改（“单击”、…）

试试这个：

加

$("#turf").on("click", ".calculation", recalc);
$("#turf").on("keyup blur", ".form-control", recalc);
// add a row if a length is entered in the last row
$("#turf").on("keyup",".length:last", function() { 
    if (!$(this).data("done")) { // only do this once per field
      $(this).data("done",true);
      addRow();
    }
});
$("#delete_row").on("click",delRow);

尽力而为

并将tfoot更改为

<tfoot>
    <tr class="grand-total persist">
        <td>Combined Totals</td>
        <td id="length-grand-total"></td>
        <td id="width-grand-total"></td>
        <td id="table-grand-total"></td>
    </tr>
</tfoot>

合计

您可以使用class=“thrup”和id=“thrup”中的一种或另一种。如果您有ID，请尝试

$（“#turp”）。在（“更改”，“计算”，function（）…

上，我将其更改为具有#turp。计算功能仍然没有更改。已更新以根据输入宽度字段的数据添加行，因此他们无需单击按钮。我知道我需要更改，但更改为什么？$（“#添加行”）。单击（function（））{'你能帮我添加行而不点击按钮吗？当然。什么触发了添加？在最后一个字段中输入数据？请参阅更新。如果你需要对输入的内容进行测试，它会更复杂。现在我只添加键控，所以原则上，即使你键入字母，它也会添加一个字段。他们应该只输入一个数字。如果我进行了验证就输入而言，这不重要，是吗？

$(document).ready(function () {
$('.calculation').change('click', function() {
    $('.turf').find('tbody').find('tr').each(function() {
        var l = $(this).find('input.length').val();
        var w = $(this).find('input.width').val();
        var dateTotal = (l * w);
        $(this).find('input.row-total').val(dateTotal);
    }); //END .each
    return false;
}); // END click 
});

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function recalc() {
    var lt=0,wt=0,tt=0;
    $("#turf").find('tr').each(function () {
        var l = $(this).find('input.length').val();
        var w = $(this).find('input.width').val();
        var dateTotal = (l * w);
        $(this).find('input.row-total').val(dateTotal?dateTotal:"");
        wt+=isNumber(w)?parseInt(w,10):0;
        lt+=isNumber(l)?parseInt(l,10):0;
        tt+=isNumber(dateTotal)?dateTotal:0;
    }); //END .each
    $("#length-grand-total").html(lt);
    $("#width-grand-total").html(wt);
    $("#table-grand-total").html(tt);
}

$("#turf").on("click", ".calculation", recalc);
$("#turf").on("keyup blur", ".form-control", recalc);
// add a row if a length is entered in the last row
$("#turf").on("keyup",".length:last", function() { 
    if (!$(this).data("done")) { // only do this once per field
      $(this).data("done",true);
      addRow();
    }
});
$("#delete_row").on("click",delRow);

<tfoot>
    <tr class="grand-total persist">
        <td>Combined Totals</td>
        <td id="length-grand-total"></td>
        <td id="width-grand-total"></td>
        <td id="table-grand-total"></td>
    </tr>
</tfoot>