javascript - 使用 jQuery 插入额外的表格行

Question

我正在尝试将额外的表格行插入到专门用于移动设备的表格中，以便所有表格数据单元格都显示在列表中。因此，例如布局当前为 2x2 布局，但我希望它显示为 1x4。

我下面的代码对于函数是正确的，因为我可以替换 </tr><tr>带有示例文本，然后将显示。问题是当我删除文本并放置 </tr><tr> 时，它没有生效，我在源代码中看不到它。

jQuery(document).ready(function(){
        jQuery(".desctable").find('td:nth-child(even)').append("</tr><tr>");;
});

<table class="desctable">
  <tr>
    <td>Table Data 1</td>
    <td>Table Data 2</td>
  </tr>
  <tr>
    <td>Table Data 3</td>
    <td>Table Data 4</td>
  </tr>
</table>

所以基本上我需要的前端结果是这样的:

<table class="desctable">
  <tr>
    <td>Table Data 1</td>
  </tr>
  <tr>
    <td>Table Data 2</td>
  </tr>
  <tr>
    <td>Table Data 3</td>
  </tr>
  <tr>
    <td>Table Data 4</td>
  </tr>
</table>

谁能告诉我为什么这不起作用？非常感谢您提供的任何帮助。

Answer 1

jQuery 的 append()方法只能将元素或文本节点插入到 DOM 中。 </tr><tr>不是元素或文本节点。

相反，您可以使用 append() 在每个现有行之后插入一行将上一行的最后一个单元格移动到新行:

$('.desctable tr').each(function() {
  $('<tr>')                          //Create new row.
    .append($(this).find('td:last')) //Add the last cell of the current row to it.
    .insertAfter($(this));           //Place it after the current row.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="desctable">
  <tr>
    <td>Table Data 1</td>
    <td>Table Data 2</td>
  </tr>
  <tr>
    <td>Table Data 3</td>
    <td>Table Data 4</td>
  </tr>
</table>