移動​​較高行當其他​​已被移除

Question

我有圖像的表，該表是4xM長度：

<tr> 
<td id='1'><div ...><img src=.../></div></td> 
<td id='2'><div ...><img src=.../></div></td> 
<td id='3'><div ...><img src=.../></div></td> 
<td id='4'><div ...><img src=.../></div></td> 
</tr> 
<tr> 
<td id='5'><div><img src=.../></div></td> 
... 

在每一個圖像I具有一個onClick = 'RemoveImg（ID）;'除去它的標籤：

function RemoveImg(id) 
{ 
$('#'+id).remove(); 
} 

之後，我刪除了使用id = 3我的html如TD是這樣的：

<tr> 
<td id='1'><div ...><img src=.../></div></td> 
<td id='2'><div ...><img src=.../></div></td> 
<td id='4'><div ...><img src=.../></div></td> 
</tr> 
<tr> 
<td id='5'><div><img src=.../></div></td> 
... 

我怎樣才能使其與ID = 5 TD，從下向上運動行看起來像這樣

<tr> 
<td id='1'><div ...><img src=.../></div></td> 
<td id='2'><div ...><img src=.../></div></td> 
<td id='4'><div ...><img src=.../></div></td> 
<td id='5'><div ...><img src=.../></div></td> 
</tr> 
<tr> 
... 

Answer 1

你可以完全擺脫表格行，並使用CSS浮動div在一個固定寬度的容器內彼此相鄰。然後，它會自動地

<div id="container"> 
    <div id='1'><img src=.../></div> 
    <div id='2'><img src=.../></div> 
    <div id='3'><img src=.../></div> 
    <div id='4'><img src=.../></div> 
    <div id='5'><img src=.../></div> 
</div> 

發生伴隨CSS

#container { 
    width: {fixed_width}; 
} 

#container div { 
    display: inline-block; 
    float: left; 
} 

Answer 2

我明白你的問題的方式是，你總是希望在連續4個項目。您需要遍歷每一行，將下一行中的第一個td移動到上一行。

或者，您可以考慮使用ul/li並浮動每個列表項。如果你在ul上放一個寬度，當孩子被移除或添加時，li孩子會自動換行。如果你的內容更大，這也可以適用於任何浮動元素。讓我知道你是否想要一個例子。

Answer 3

代碼示例here從第一行中刪除第三列，並將第二行的第一列添加到第一行。

function RemoveImg(columntoRemove, columntoAppend) 
    { 
     $('#'+columntoRemove).remove(); 
     var col5 = $("#" + columntoAppend).clone(); 
     $("#abctable tr:first").append(col5); 
    };