Question

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

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

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

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

Answer 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和浮动div来代替。这正是他们设计的那种东西。

Answer 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() 移动现有元素。

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

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

2 个答案: