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

我在HTML中有三列表。第三列中的单元格都是相同的类。根据屏幕大小将列移动到新行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>

谢谢。

来源

2011-11-18 theflionking

哪个部分你有麻烦？如果您显示您现有的JavaScript代码，我们可以帮助您处理卡住的部分。（或者你是要求我们为你写全部内容？）另外，你的要求是“移动第三列”还是“移动列= class''thircol'”，或者“只有在class = 'thirdcol'“？ – nnnnnn

如果你不需要使用表格，这就是使用DIV显示柱状数据真正发光的地方。 –

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！而非。这正是他们设计的那种东西。

来源

2011-11-19 00:17:10

此代码完美工作。非常感谢。最后一个请求。是否有代码可以做到与此相反，以便我可以将页面还原而无需重新加载？ – theflionking

好的，这里有一个“简单”的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”，正如你可以看到它是硬编码移动第三列 - 但当然你可以用一个漂亮的函数把它包装起来对于表格和哪个列应该移动：这取决于你...

来源

2011-11-19 00:29:37 nnnnnn

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

回答

相关问题