移动& lt; td>当其他<td>已被移除

Moving <td> to higher row when other <td> has been removed

本文关键字：td lt 移动 其他      更新时间：2023-09-26

我有一个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);
    };
相关文章：