在特定行下方添加一行

Question

我想在另一行下面添加一行，但它添加在最后。

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <table style="width: 200px" border="1">
      <tr>
        <th style="width: 100px">A</th>
        <th style="width: 100px">B</th>
      </tr>
      <tr id="info">
        <td>Data1</td>
        <td>Data2</td>
      </tr>
      <tr>
        <th colspan="2">C</th>
      </tr>
    </table>
    <br />
    <button type="button" onclick="AddRow()">Add Row</button>
  </body>
</html>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  function AddRow() {
    $('#info').parent().append('<tr><td>Data3</td><td>Data4</td></tr>');
  }
</script>

我想补充如下。有办法实现吗？

Answer 1

tr#info 的父级是 table 本身。因此，当您 append() 到那个 table 时，内容放在最后。

做你需要的 select #info 并使用 after() 直接在目标后面插入内容：

jQuery($ => {
  $('.add-row').on('click', () => {
    $('#info').after('<tr><td>Data3</td><td>Data4</td></tr>');
  });
});

table { width: 200px; }
th { width: 100px; }

<table border="1">
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr id="info">
    <td>Data1</td>
    <td>Data2</td>
  </tr>
  <tr>
    <th colspan="2">C</th>
  </tr>
</table><br />

<button type="button" class="add-row">Add Row</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

另请注意，在上面的示例中，我将内联 CSS 移动到外部样式表，并将内联 JS 事件处理程序移动到通过 jQuery 附加的不显眼的样式表。您的 HTML 最好不包含 HTML.

以外的任何代码

Answer 2

您应该使用 jQuery after() 函数 - https://api.jquery.com/after/

示例：

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <table style="width: 200px" border="1">
      <tr>
        <th style="width: 100px">A</th>
        <th style="width: 100px">B</th>
      </tr>
      <tr id="info">
        <td>Data1</td>
        <td>Data2</td>
      </tr>
      <tr>
        <th colspan="2">C</th>
      </tr>
    </table>
    <br />
    <button type="button" onclick="AddRow()">Add Row</button>
  </body>
</html>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  function AddRow() {
    $('#info').after('<tr><td>Data3</td><td>Data4</td></tr>');
  }
</script>

在特定行下方添加一行

Add a row below a specific row

html

jquery

html-table

tr