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(){...})。
表格捕获click事件。这样可以确保新插入的行的按钮也能正常工作。
不要混合风格。如果您使用jQuery，请不要通过HTML中的onclick属性附加点击处理程序。它使您的代码难以维护，并且您可以更灵活地使用jQuery方式。

希望有帮助，如果您对此有疑问，请对此帖发表评论。

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

1 个答案: