需要在不影响原始脚本的情况下复制附加表的脚本

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

您应该像在delete行中所做的那样。

而不是

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

你可以做

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

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