在當前行之后向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方式。

希望有所幫助，如果您對此有疑問，請對此帖發表評論。