Question

我有这个表，我想在同一个rowId中添加按钮的Rows。例如，在单击“添加第1行”按钮时，我想在第1行中添加一行，在“＃34;某些内容1＆＃34;”之后，依此类推。

  <table id="table1">
       <thead>
         <th>Heading 1</th>
         <th>Heading 2</th>
       </thead>
       <tbody>
         <tr id="row1">
            <td>Some content 1<td>
            <td><button id="addButton1">Add Row 1</button><td>
         </tr>
         <tr id="row2">
            <td>Some content 2<td>
            <td><button id="addButton2">Add Row 2</button><td>
         </tr>
       <tbody>
    </table>

这是我目前使用的脚本：

$("#addBtn").on("click", function () {
    $("#table1 tbody").append("<tr><td>1</td><td>1</td></tr>");

});

这是在表的末尾添加行。如何在同一部分中使用jQuery添加行？

Answer 1

尝试使用.closest()和.after()来实现你想要的，你应该在这个上下文中使用id启动选择器，或者你可以为所有按钮添加一个公共类并使用它作为选择者。

$("[id^=addButton]").on("click", function () {
    $(this).closest('tr').after("<tr><td>1</td><td>1</td></tr>");
});

旁注：我已编辑了一些丑陋的HTML，以使您的代码有效

DEMO

Answer 2

你可以这样做。

$("#table1 button").on("click", function () {    
$(this).parents('tr').after("<tr><td>1</td><td>1</td></tr>");
});

在按钮之前使用jQuery添加表行

2 个答案:

DEMO