使用 jQuery 插入其他表行

Insert Additional Table Rows with jQuery

本文关键字：其他 插入 jQuery 使用      更新时间：2023-09-26

>我正在尝试将其他表格行插入到专门用于移动设备的表格中，以便所有表格数据单元格都显示在列表中。因此，例如布局当前是 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>

任何人都可以告诉为什么这不起作用吗？非常感谢您能提供的任何帮助。

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>

我真的建议使用响应式CSS框架来格式化不同屏幕尺寸的内容。

骨架CSS非常简单：http://getskeleton.com

世界上每个人都使用Bootstrap：http://getskeleton.com

如果您只想在移动设备中显示某些行，并且如果您使用引导程序，请检查此项。 更改浏览器大小并查看结果。

<table class="desctable table table-bordered">
  <tr>
    <td>Table Data 1</td>
    <td>Table Data 2</td>
  </tr>
  <tr>
    <td>Table Data 3</td>
    <td>Table Data 4</td>
  </tr>
  <tr class="hidden-lg hidden-md hidden-sm">
    <td>Only mobile</td>
    <td>Only mobile</td>
  </tr>
</table>
http://codepen.io/airsakarya/pen/MyBzyw
相关文章：