Javascript 移动<；td>；当其他时，转到更高的行（<；td>；已被删除

我有一张4毫米长的图像表：

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

例如，删除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>
...

...

您可以完全去掉表行，并使用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>

---

我理解你的问题的方式是，你总是希望一行有4个项目。您需要在每一行上循环，将第一个td从下一行向上移动

可选地，您可以考虑使用UL/Li并浮动每个列表项。如果您在ul上设置了一个宽度，则移除或添加一个时，li子项将自动为您包裹。如果您的内容更大，这也适用于任何浮动元素。如果您想要一个示例，请告诉我。

代码示例从第一行删除第三列，并将第二行的第一列添加到第一行

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

---

要进一步说明答案，这不是表的正确用法。表格用于表格数据。您有一个网格类型的布局。浮动元素是正确的选择。有关预构建系统的示例，请参见或。

#container {
    width: {fixed_width};
}

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

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