Javascript：将元素 td's 转移到 td's

Question

我知道我的标题很混乱，但让我解释一下。

基本上，我想随时操作表格来添加和插入tr和td，因为这是我决定为我的布局做的事情。是这样的：

在第一个波浪上，假设 window = 1，布局应该只显示一个窗口：

     []
     <tr>
              <td>
              </td>
     </tr>

第二波，窗口 = 2：

     [] []
     <tr>
              <td>
              </td>
              <td>
              </td>
     </tr>

第三波，窗口 = 3：

     []
     []
     []
     <tr>
              <td>
              </td>
     <tr>
              <td>
              </td>
     </tr>
     <tr>
              <td>
              </td>
     </tr>

第四波，窗口 = 4：

     [] []
     [] []
     <tr>
              <td>
              </td>
              <td>
              </td>
     </tr>
     <tr>
              <td>
              </td>
              <td>
              </td>
     </tr>

这些括号就像 td 中的div。只要这些窗口以这种方式格式化，div 内部的内容就无关紧要。

我已经到了第二波，但无法在窗口 3 继续。我得到的是李

     []
     [] []
     <tr>
              <td><div></td>
     </tr>
     <tr>
              <td><div></td>
              <td><div></td>
     </tr>

这是不应该的。我如何像之前在 javascript 中所说的预期结果那样做？会像触发器一样改变每一波。有什么想法吗？请帮忙。谢谢

Answer 1

使用div 而不是表。从单个容器div 开始，该容器将容纳所有其他容器div。

<div class="container">
</div>

在每次迭代中，添加一个子项并更改容器的类，以反映具有奇数个或偶数个子项。

第一：

<div class="container odd">
    <div></div>
</div>

第二：

<div class="container even">
    <div></div>
    <div></div>
</div>

第三：

<div class="container odd">
    <div></div>
    <div></div>
    <div></div>
</div>

等等。

然后只需编写一些 css .odd放在一列中，.even放在两列中。