根据屏幕大小html表将列移动到新行答案

【问题标题】：Moving column to new row based on screen size html table根据屏幕大小html表将列移动到新行
【发布时间】：2012-01-01 16:32:20
【问题描述】：

我有一个 HTML 格式的三列表格。第三列的单元格都属于同一类。

如果屏幕宽度小于 750 像素，我希望每行中的第三列移动到该列下的新行。

因此，表格通常如下所示：

<table>
 <tr>
  <td></td>
  <td></td>
  <td class="thirdcol"></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td class="thirdcol"></td>
 </tr>
</table>

如果屏幕宽度小于 750px，我希望 javascript 函数使表格看起来像这样：

<table>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td class="thirdcol"></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td class="thirdcol"></td>
 </tr>
</table>

【问题讨论】：

您在哪个部分遇到了问题？如果您展示您现有的 JavaScript 代码，我们可以帮助您解决您遇到的问题。（或者您是要我们为您写完整的内容吗？）另外，您的要求是“移动第三列”，还是“移动 class='thircol' 的列”，或者“仅在 class= 时移动第三列” 'thirdcol'"？
如果您不必使用表格，这就是使用 DIV 显示列数据的真正亮点。

标签： javascript html-table

【解决方案1】：

Here's a JSFiddle 及其工作版本（使用 JQuery）。以下是实际起作用的重要部分：

if ($(window).width() < 750) {
    $('td.thirdcol').each(function(i, item) {
        var row = $(item).clone(true).prop('colspan','2').wrapAll('<tr />');
        $(item).closest('tr').after(row);
        $(item).remove();
    });
}

但是，如果我是你，我不会为此使用 Javascript 或表格，而是使用 CSS 和浮动 divs。这正是他们设计的目的。

【讨论】：

这段代码运行良好。太感谢了。最后一个请求。是否有代码可以做相反的事情，这样我就可以在不重新加载的情况下恢复页面？

【解决方案2】：

好的，这是一种“普通”的 JavaScript 方式。没有神奇的“选择整列”机制（我知道），所以你必须逐行进行，插入新行。

var t = document.getElementById("table1"),
    r,
    i;
if (screen.width < 750)
    for(i = t.rows.length - 1; i >= 0; i--) {
        r = t.insertRow(i+1);
        r.appendChild(t.rows[i].cells[2]);
    }

请注意，您不必显式删除每个单元格，因为.appendChild() 将移动现有元素。

我的代码假设你可以给你的表一个 ID 为“table1”，正如你所看到的，移动第三列是硬编码的 - 但当然你可以将它全部包装在一个带有参数的漂亮函数中表格以及应该移动哪些列：这取决于您...

【讨论】：