使用JQuery .append（）動態更改表格佈局

我正在使用HTML表格，但我想根據瀏覽器大小動態更改表格的佈局。我的基本代碼如下所示：使用JQuery .append（）動態更改表格佈局

<tr> 
    <td class="row">E1</td> 
    <td class="row">E2</td> 
    <td class="row">E3</td> 
    <td class="lastRow">E4</td> 
</tr>

然後JQuery應計算行數並相應地插入行分隔符。我JQuery的是這樣的現在：

$('td.row').append('</tr><tr>');

然而，它仍然顯示在一行中的所有元素。任何想法爲什麼？

來源

2011-09-14 BLane

不要這樣做。僅僅爲了佈局而改變元素打破了元素與風格分離的整個概念。 – Brad

試試看.after（）;功能：

http://api.jquery.com/after

來源

2011-09-14 19:49:18 jeffreydev

這是利用流體的CSS佈局的理想場所。

而不是寫很多瘋狂的DOM操作的JavaScript的，只需用divs更換你TD標籤，讓他們float:left

Further- append沒有做什麼，你認爲它。這是dom操縱，而不是字符串操作 - 你不能用它來直接改變你的想法。

Further reading

來源

2011-09-14 19:49:34 RSG

我認爲你需要嘗試此選擇

Asumming你的表haved稱爲ID example嘗試這樣

$("#exmaple tr:last").append('<tr></tr>');

來源

2011-09-14 19:51:38 Jorge

$('</tr><tr>').insertAfter('.row');

來源

2011-09-14 19:51:55 v42

你會想做你的追加tr元素，而不是td.row

來源

2011-09-14 19:52:11

你ne編輯到而不是認爲在構建HTML標記方面。沒有辦法將關閉/開放</tr><tr>拼接到DOM（沒有一些醜陋的.innerHTML黑客）。

取而代之的是，在當前行之後創建一個新行，並將單元格重新放置到新行中。

var row_cells = $('td.row').slice(1); 

row_cells.each(function(i, el) { 
    $('<tr>').insertAfter(row_cells.eq(i).parent()) 
      .append(row_cells.eq(i)); 
});

DEMO：http://jsfiddle.net/EDf5a/

或者，也許你想每個小區的新行：

var row_cells = $('td.row'); 
var row = row_cells.parent(); 

row_cells.each(function(i, el) { 
    $('<tr>').insertBefore(row) 
     .append(row_cells.eq(i)); 
});

DEMO：http://jsfiddle.net/EDf5a/1/

來源

2011-09-14 19:52:20 user113716

這隻適用於前兩個元素？ – BLane

@Barry：我必須猜測最終結果是什麼意思。不知道你的意思是「相應地」*。我以爲你想讓最後一個單元格在自己的行中。如果這不正確，請描述所需的結果。編輯：也許你的意思是每行一行。我會提供更新。 – user113716

擁抱堆棧溢出作爲開明話語的社區，避免使用特技代碼實現糟糕的設計決策。 – RSG

使用JQuery .append（）動態更改表格佈局

回答

相關問題