使用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> 

Answer 2

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

Skeleton CSS非常简单： http ： //getskeleton.com

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

Answer 3

如果你想只在移动设备上显示一些行，如果你使用bootstrap，请检查一下。 更改浏览器大小并查看结果。

<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