我有一个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>
...
在每个图像上,我都有一个onClick='RemoveImg(id);'
来删除它的<td>
标签:
function RemoveImg(id)
{
$('#'+id).remove();
}
当我删除例如td with id=3后,我的html看起来像这样:
<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>
...
我如何使td与id=5,从下面的行向上移动,看起来像这样
<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>
...
您可以完全摆脱表格行,并使用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;
}
我理解你的问题的方式是你总是想要一行4个项目。您需要循环遍历每一行,将第一个td从下一行向上移动。
或者,您可以考虑使用ul/li并浮动每个列表项。如果在ul上设置了宽度,则在删除或添加宽度时,li子元素将自动为您换行。这也适用于任何浮动元素,如果你的内容更大。如果你想要一个例子,请告诉我。
下面的代码示例从第一行删除第三列,并从第二行添加第一列到第一行。
function RemoveImg(columntoRemove, columntoAppend)
{
$('#'+columntoRemove).remove();
var col5 = $("#" + columntoAppend).clone();
$("#abctable tr:first").append(col5);
};