javascript - 需要为其他表复制脚本而不影响原始脚本

Question

我有两个表，我希望能够动态添加和删除行，这两个表都使用单独的脚本但相同。如何更改第二个脚本，以便它能够更改第二个表而不是第一个表？

表:

<table id="myTable" class=" table order-list">
    <thead>
    <tr>
        <td>Numbers</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="col-sm-4">
            <input type="text" name="number[]" class="form-control"/>
        </td>
        <td class="col-sm-4"><a class="deleteRow"></a>
        </td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="0" style="text-align: left;">
            <input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Another Number"/>
        </td>
    </tr>
    </tfoot>
</table>

脚本:

<script>

$(document).ready(function () {
    var counter = 0;

$("#addrow").on("click", function () {
    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="number min="1"" class="form-control" name="step_number[]' + counter + '"/></td>';
    cols += '<td><input type="text" class="form-control" name="step_description[]' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger "  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();       
    counter -= 1
});

});

</script>

Answer 1

你应该像删除行中那样做。

而不是

 $("table.order-list").append(newRow);

你可以做到

 $(this).closest("table.order-list").append(newRow);

并且应该添加一个类来添加按钮而不是使用 id