Question

jQuery在第一行表中工作正常，但在添加另一行后jQuery无效。

对于第一行总金额可以计算，但在添加另一行jQuery后，计算总金额会停止工作。

[Here][1] is my jsfiddle link.

Answer 1

对于新添加的元素，您需要再次绑定click事件。并且还存在重复ID的问题，因为您没有更新新添加的行的ID，更新ID或使用类。

HTML：

<div style="margin:10%;">
    <table id="tb" class="table table-list table-striped" style="width:40%;">
        <thead>
            <tr>
                <th>S.No</th>
                <th>Title</th>
                <th>Cost</th>
                <th>Date</th>
                <th>Description</th>
                <th>Net</th>
                <th>Vat(%)</th>
                <th>Gross</th>
            </tr>
        </thead>
        <tbody id="row_div">
            <tr>
                <td>1</td>
                <td>
                    <input type="text" id="title" class="input-medium" name="title" cost_class="title" />
                </td>
                <td>
                    <input type="text" id="cos" class="input-medium" name="cost" cost_class="cost_type" />
                </td>
                <td>
                    <input type="text" id="datepicker" class="date_Picker" name="date1" date_class="date_type" />
                </td>
                <td>
                    <input type="text" id="des" class="test" name="description" description_class="description_type" />
                </td>
                <td>
                    <input type="text" id="net" name="Net" class="num1">
                </td>
                <td>
                    <input type="text" id="vat" name="Vat" class="num2">
                </td>
                <td>
                    <input type="text" id="gross" name="Gross" class="sum">
                </td>
            </tr>
        </tbody>
    </table>
    <div class="row" style="margin-left:20px;"><a href="javascript:add_tr();">Add</a>&nbsp;|&nbsp; <a href="javascript:remove_tr();">Remove</a>

    </div>
</div>

JS代码：

$(function () {

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

        $(this).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy'
        }).datepicker("show");
    });
});

var intTextBox = 1;
//FUNCTION TO ADD File BOX ELEMENT
function add_tr() {
    if (intTextBox > 0) {

        intTextBox = intTextBox + 1;
        var contentID = document.getElementById('row_div');
        var newtr = document.createElement('tr');
        newtr.setAttribute('id', 'floorstrText' + intTextBox);
        newtr.innerHTML = "<td>" + intTextBox + "</td><td><input type='text' id=title" + intTextBox + " name=title" + intTextBox + " class='input-medium cost' cost_class='cost_type'/></td><td><input type='text' id=cos" + intTextBox + " name=cost" + intTextBox + " class='input-medium' cost_class='cost_type'/></td><td><input  name=date" + intTextBox + " type='text' class='date_Picker input-medium'  id=dat" + intTextBox + " date_class='date_type'/></td><td><input type='text' id=des" + intTextBox + " name=des" + intTextBox + " description_class='description_type' /></td><td><input  name=Net" + intTextBox + " type='text' class='num1 key'  id=net" + intTextBox + " /></td><td><input  name=Vat" + intTextBox + " type='text' class='num2 key'  id=dat" + intTextBox + " /></td><td><input  name=Gross" + intTextBox + " type='text' class='sum'  id=gross" + intTextBox + "/></td>";
        contentID.appendChild(newtr);
        addEvent();
    }

}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function remove_tr() {
    if (intTextBox != 0) {
        var contentID = document.getElementById('row_div');
        contentID.removeChild(document.getElementById('floorstrText' + intTextBox));
        intTextBox = intTextBox - 1;
    }
}

function addEvent() {
    $(".sum").click(function () {
        var net = $(this).parents('tr').find('.num1');
        var vat = $(this).parents('tr').find('.num2');
        var gross = parseInt(net.val() || 0) + (parseInt(net.val() || 0) * parseInt(vat.val() || 0) / 100);
        $(this).val(gross);
    });

}
$(document).ready(function () {
    addEvent();
});

试试此代码或查看此演示DEMO

Jquery不在表的重复行中工作

1 个答案: