Question

我现在使用jquery添加动态行我想添加行的那些列。下面是我的代码，我无法添加动态创建的列。计算第一个文本框，答案显示在grandtotal文本框中，但无法计算其余文本框。

        <tbody>
            <tr class="data-contact-person">
                <td>
                    <input type="text" name="a" class="form-control a" />
                </td>
                <td>
                    <input type="text" name="b" class="form-control b" />
                </td>
                <td>
                    <input type="text" name="c" class="form-control c" />
                </td>
                <td>
                    <input type="text" name="d" class="form-control d" />
                </td>

                <td>
                    <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>

                </td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td></td>
                <td>Grand-Total</td>
                <td>
                    <input data-val="true" id="grdtol1" name="grdtol1" value="" class="form-control text-box single-line" type="text">
                </td>
                <td>
                    <input data-val="true" id="grdtol" name="grdtol2" value="" class="form-control text-box single-line" type="text">                      
            </tr>
        </tfoot>

$(document).ready(function () {
    $(document).on("click", ".classAdd", function () { //
        var rowCount = $('.data-contact-person').length + 1;
        var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
            '<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
            '<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
             '<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +

            '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
            '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
            '</tr>';
        $('#maintable').append(contactdiv); // Adding these controls to Main table class
    });
});
$(document).on("click", ".deleteContact", function () {
   $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});

$(document).ready(function (e) {

    $("input").change(function () {
        var grdtol1 = 0;

        $("input[name=c]").each(function () {
            grdtol1 = grdtol1 +parseInt( $(this).val());

        })

        $("input[name=grdtol1]").val(grdtol1);
    });
})

Answer 1

首先，一条建议，不要在同一个javascript文件中创建多个$(document).ready()函数，只需要一个。

你还没有发布你的html代码，所以我猜这里，但我想你最初有输入行，你还有一个输入name="grdtol1"，你想要计算的总和列的值，并且在更改任何输入中的值时必须刷新。

据此，我看到了这个问题......

您需要为输入onchange事件使用事件委派（就像您对.deleteContact按钮所做的那样）。您直接关联事件，因此它仅适用于页面加载时DOM中的元素，而不适用于您以dinamically方式添加的行。例如，您可以将事件与表关联并将其委托给输入。
在活动内部，您选择$("input[name=c]")，但根据之前的代码，您的输入将为name="c' + rowCount + '"。您可以使用该类来选择它们。
如果删除一行，则还应重新计算总和，因为该行的输入将消失。

全部放在一起......

$(document).ready(function () {

    $(document).on("click",".classAdd",function() {

        var rowCount = $('.data-contact-person').length + 1;

        var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
            '<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
            '<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
             '<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +

            '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
            '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
            '</tr>';

        $('#maintable').append(contactdiv); // Adding these controls to Main table class
    });

    function calculateGrandtotal() {

        var grdtol1 = 0;

        $('input.c').each(function() {
            grdtol1 += parseInt($(this).val());
        })

        $("input[name=grdtol1]").val(grdtol1);
    }

    $('#maintable').on('click','.deleteContact',function () {
        $(this).closest('tr').remove();
        calculateGrandtotal()
    })
    .on('change','input.c',function() {
        calculateGrandtotal()
    });

});

我希望它有所帮助

我现在使用jquery添加动态行我想添加这些列

1 个答案: