javascript - 当其他已被删除时移动到更高的行

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

我怎样才能使它 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>
...

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

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

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

Answer 3

我理解你的问题的方式是你总是想要连续 4 个项目。您需要遍历每一行，将第一个 td 从下一行向上移动。

或者，您可以考虑使用 ul/li 并浮动每个列表项。如果您在 ul 上设置宽度，则 li 子项会在删除或添加一个子项时自动为您换行。如果您的内容更大，这也适用于任何浮动元素。如果你想要一个例子，请告诉我。