在单击add函数的位置之后添加另一行

Adding another row after where the add function is clicked

本文关键字：一行 添加 之后 add 单击 函数 位置      更新时间：2023-09-26

我写了这个函数:

        $(".tdAdd").on("click", function () {
        counter = $('#myTable tr').length - 3; //supposing i only have 2 data
        var count = $("#myTable").length;
        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="button" value="Add" class="tdAdd"/></td>';
        cols += '<td><input type="text" name="name' + counter + '"/></td>';
        cols += '<td><input type="text" name="price' + counter + '"/></td>';
        cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
        newRow.append(cols);
        $("table.order-list").append(newRow); // this is adding row to the end. but i want i on a specific row after where the add button was clicked
        counter++;
    });
    $("table.order-list").on("click", ".ibtnDel", function (event) {
        $(this).closest("tr").remove();
    });


});

和我的表是这样的:

<table id="myTable" class="order-list">
<thead>
    <tr>
        <td></td>
        <td></td>
        <td>Name</td>
        <td>Price</td>
    </tr>
</thead>
<tbody>
    <tr>
           <td style="text-align: left;">
            <input type="button" id="addrow" value="Add Row" />
        <td>
            <input type="text" name="name" />
        </td>
        <td>
            <input type="text" name="price1" />
        </td>
        <td>
            <input type="button" value="Delete" class="ibtnDel"/>
        </td>
    </tr>
</tbody>        
</table>

下面是一个示例

我想在我点击添加行按钮的地方添加另一行。小提琴将只添加行在表的底部，只有第一个按钮将工作。任何帮助都会很感激。谢谢!

i tried: 

$("table.order-list").eq(count-1).after(newRow)

但是我仍然不能让代码工作

您需要将事件侦听器应用于文档，因为按钮是动态创建的。如:

$(document).on("click", '.tdAdd', function () { ... }

参见更新后的fiddle:

http://jsfiddle.net/y8F88/1/

相关文章：