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在固定宽度的容器中将divs彼此相邻浮动。然后它会自动发生

<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子项时，li子将自动换行。如果您的内容更大，这也适用于任何浮动元素。如果你想要一个例子，请告诉我。

Answer 3

代码示例here从第一行中删除第3列，并将第一列从第二行添加到第一行。

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

移除其他行时移至更高行

3 个答案: