根據屏幕大小將列移動到新行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表

回答

相關問題