Question

我正在研究这段代码。我希望为每一行启用删除和添加行。对于添加行按钮，我希望在所选行的正下方添加行...有谁知道如何做到这一点？感谢是否有人可以提供帮助。

<html>
<head>
    <script src= 'http://code.jquery.com/jquery-2.1.1.min.js'></script>
    <script>
    $(document).ready(function () {
        var counter = 0;

        $("#addrow").on("click", function () {

            var counter = $('#myTable tr').length - 2;

            $("#ibtnDel").on("click", function () {
                counter = -1
            });

            var newRow = $("<tr>");
            var cols = "";

            cols += '<td><input type="text" name="name' + counter + '"/></td>';
            cols += '<td><input type="text" name="price' + counter + '"/></td>';

            cols += '<td><input type="button" id="ibtnDel"  value="Delete"></td>';
            cols += '<td colspan="5" style="text-align: left;"><input type="button" id="addrow" value="Add Row" /></td>';


            newRow.append(cols);
            $("table.order-list").append(newRow);
            counter++;
        });

        $("table.order-list").on("change", 'input[name^="price"]', function (event) {
            calculateRow($(this).closest("tr"));
            calculateGrandTotal();
        });


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

    });



    function calculateRow(row) {
        var price = +row.find('input[name^="price"]').val();
    }

    function calculateGrandTotal() {
        var grandTotal = 0;
        $("table.order-list").find('input[name^="price"]').each(function () {
            grandTotal += +$(this).val();
        });
        $("#grandtotal").text(grandTotal.toFixed(2));
    }
</script>
</head>

<body>
<table id="myTable" class="order-list">
    <thead>
        <tr>
            <td>Name</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" name="name" />
            </td>
            <td>
                <input type="text" name="price1" />
            </td>
            <td><input type="button" id="ibtnDel"  value="Delete"></td>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Row" />
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="">Grand Total: $<span id="grandtotal"></span>
            </td>
        </tr>
    </tfoot>
</table>
</body>
</html>

Answer 1

>> WORKING DEMO <<

演示的可视化：

enter image description here

我在所有其他答案中看到count功能完全被忽略，因此在他们发布的演示中不再有效。因此，永远不会禁用add按钮。

我已经解决了这个问题，确保代码在任何地方都是连贯的。从我的演示中可以看出，当count变量等于4时，所有add按钮都被禁用。此外，当count计数函数再次低于4时，所有按钮都会再次启用。这可能正是你想要的。

要使选择性添加功能需要做的是添加另一个功能，该功能负责在单击相应按钮的行之后添加行。

举个例子：

的jQuery

$("#addrow").on("click", function () {
    counter = $('#myTable tr').length - 2;
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="text" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" name="price' + counter + '"/></td>';
    cols += '<td><input type="button" class="ibtnAdd"  value="Add after"></td>';
    cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    if (counter >= 4) {
        $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
        $('.ibtnAdd').attr('disabled', true).prop('value', "You've reached the limit");
    }
    counter++;
});

// ...
// ... here is the other jQuery code
// ...

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();
    calculateGrandTotal();
    counter--;
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
    $('.ibtnAdd').attr('disabled', false).prop('value', "Add after");
});

$("table.order-list").on("click", ".ibtnAdd", function (event) {
    counter = $('#myTable tr').length - 2;
    var newRow = $("<tr>");
    var cols = "";
    cols += '<td><input type="text" name="name' + counter + '"/></td>';
    cols += '<td><input type="text" name="price' + counter + '"/></td>';
    cols += '<td><input type="button" class="ibtnAdd" value="Add after"></td>';
    cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
    newRow.append(cols);
    $(this).closest("tr").after(newRow);
    if (counter >= 4) {
        $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
        $('.ibtnAdd').attr('disabled', true).prop('value', "You've reached the limit");
    }
    counter++;
});

此外，建议使用.after()代替.append()。

祝你好运！

Answer 2

您正在尝试创建ids并在html DOM中插入相似的内容并尝试在ids上添加点击事件，这实际上是一种不好的做法，违反HTML规则！所以我通过聆听class并将class添加到每个按钮来改变您的点击事件，下面将是您的更改：

<强> DEMO HERE

$("#myTable").on("click",".addRow", function () {
      var counter = $('#myTable tr').length - 2;

      var newRow = $("<tr>");
      var cols = "";
      cols += '<td><input type="text" name="name' + counter + '"/></td>';
      cols += '<td><input type="text" name="price' + counter + '"/></td>';
      cols += '<td><input type="button" id="ibtnDel" class="dele" value="Delete"></td>';
      cols += '<td colspan="5" style="text-align: left;"><input type="button" class="addRow" value="Add Row" /></td>';
      newRow.append(cols);
      newRow.insertAfter($(this).parents().closest('tr'));
      counter++;
});
 $("#myTable").on("click",".dele", function () {
         counter = -1
 });

删除功能将是：

 $("table.order-list").on("click", ".dele", function (event) {
            $(this).closest("tr").remove();
            calculateGrandTotal();
 });

使用.insertAfter在点击的行之后插入。

Answer 3

<强>的jsfiddle http://jsfiddle.net/gax0w07p/

使用.after()代替append：

 //Replace
 //$("table.order-list").append(newRow);
 // With
 $(this).parent().parent().after(newRow);
 // this = button
 // first parent = td
 // second parent = tr

另一种选择是使用最近而不是两次父呼叫

 $(this).closest('tr').after(newRow);

关于after()的文档： http://api.jquery.com/insertafter/

Jquery在所选行的正下方添加行

3 个答案:

>> WORKING DEMO <<

的jQuery