javascript - 在按钮前用 jQuery 添加表行

Question

我有这个表，我想在相同的 rowId 中添加按钮上的行。例如，在单击“添加第 1 行”按钮时，我想在“某些内容 1”下的第 1 行中添加一行，依此类推。

  <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 starts with selector 或者你可以为所有这些按钮添加一个通用类并将其用作选择器。

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

旁注:我已经编辑了一些你丑陋的 html 以使你的代码有效

DEMO