在当前行之后向 jQuery 表中添加行

Question

我想知道如何在数据表中的特定行之后添加行。 为此，我正在使用 jQuery 数据表插件。

我可以通过表格行索引。我需要将该行插入到我的 javascript 函数中，如下所示：

function addNewContact(rCount){ .. }

而我的 HTML 代码是：
table id="exampleTbl"
tr
td..../td (data of first column)
td..../td (data of second column)
...
td
input type="button" id="addNewContact<%=rCount %>" name="addNewContact_Details" value="+" onclick="javascript:addNewContact(<%=rCount %>);"
/td
/tr
/table

对于新添加的行，我希望前 3 列为空白，其他列 (5) 包含文本框。

Answer 1

假设您的表格如下所示：

<table id="exampleTbl">  
    <tr>
        <td>....</td>
        <td>....</td>
        ...  
        <td>
           <button type="button" class="addRow" />+</button>
       </td>  
    </tr>
</table>

您可以将点击处理程序添加到添加一行的按钮，如下所示：

$(function() {
    // HTML template of a row
    var html = '<tr><td></td>...<td><button type="button" class="addRow">+</button></td></tr>';

    $('#exampleTbl').delegate('button.addRow', 'click', function() {
        var row = $(this).closest('tr'); // get the parent row of the clicked button
        $(html).insertAfter(row); // insert content
    });
});

一些注意事项：

• 由于$(function(){...})，一旦加载DOM，代码就会被执行。
• click 事件被表捕获。这样可以确保新插入的行的按钮也能正常工作。
• 不要混合样式。如果您使用 jQuery，请不要通过 HTML 中的 onclick 属性附加点击处理程序。它使您的代码难以维护，并且您可以更灵活地使用 jQuery 方式进行维护。

希望对您有所帮助，如果您对此有任何疑问，请在此帖子下发表评论。