当其他 <td> 已被删除时，将 <td> 移动到更高的行

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>
...

在每张图片上我都有一个onClick='RemoveImg(id);' 来删除它的<td> 标签：

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

例如删除 id=3 的 td 后，我的 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>
...

如何使用 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);
    };