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()将上一行的最后一个单元格移动到新行：

＆＃13;

$('.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.
});

＆＃13;

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

＆＃13;

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

使用jQuery插入其他表行

3 个答案: