Question

我有一个HTML表格，每一行都是可点击的，可以作为手风琴使用。单击该行时，每行下方都会显示一些元素（另一个表，一些其他div元素等）。这是一个功能小提琴：

问题是，如果我有n行，我必须将隐藏元素的代码附加到每一行才能使其工作，即此代码：

   <tr>
      <td colspan="6">
        <input id="row1" type="checkbox">
        <table>
          <tr>
            <th>Phone Number</th>
            <td>555-3226</td>
            <th>City:</th>
            <td>New York</td>
          </tr>
          <tr>
            <th>Hire Date:</th>
            <td>8/13/12</td>
            <th>Salary:</th>
            <td>$48,000</td>
          </tr>
        </table>
      </td>
    </tr>

此外，每次生成一行时，我都必须为此输入提供一个新ID：

<input id="row1" type="checkbox">

我有一个用JavaScript编写的循环来完成所有这些操作。在每次迭代中都会创建新的表行，并且我有代码可以手动创建此HTML的每个元素并将其附加到每个生成的行：

        <tr>
          <td colspan="6">
            <input id="row1" type="checkbox">
            <table>
              <tr>
                <th>Phone Number</th>
                <td>555-3226</td>
                <th>City:</th>
                <td>New York</td>
              </tr>
              <tr>
                <th>Hire Date:</th>
                <td>8/13/12</td>
                <th>Salary:</th>
                <td>$48,000</td>
              </tr>
            </table>
          </td>
        </tr>

所以在创建所有行的循环中，我有类似的东西：

var createRow = document.createElement("TR");
 var createCell = docment.createElement("TD");
 tbody.appendChild(createRow);
 tbody.appendChild(createCell);

etc.....

我有这么多html来创建这种方式，所以大约有100-200行JavaScript代码创建这些元素。所有这一切对我有用，但我的问题是：有没有更好更有效的方法来实现这一点，而不是重新创建JavaScript代码中的每一个HTML元素？两者都有效，在编写更少的代码时可以完成所有这些并且在性能方面有效吗？我试图坚持纯JavaScript，没有库。任何建议都将不胜感激。

Answer 1

从你的jsFiddle，我明白你通过一个奇怪的技巧实现了手风琴的开放功能：一个覆盖整个行的标签，在相应的输入上使用CSS伪类来显示表格。

这很有趣，因为它不涉及脚本，但它需要创建更多元素并使用每个输入的唯一ID（因此您必须分配唯一ID的问题）。它还可以防止复制行文本，并且在隐藏行上仍然有一个额外的行（实际上是一个高度为0的行，因为它是空的）。最后，必须已经创建了嵌套表。

因为无论如何你需要编写脚本来生成主表，为什么不在表行上使用event listening来执行此操作呢？您甚至可以根据需要生成嵌套表（当用户单击某行时），这样您就不必在表初始化时创建它们。这样可以节省主表处理的时间。

关于生成主表，请参阅this comparison有关性能的信息。它显示了两种最快的方法：

生成一串HTML代码，然后在最后填写element.innerHTML。
在DOM外部使用生成的元素（或文档片段或克隆节点），根据需要使用其他元素填充它，然后将其插入DOM中。

演示：http://jsfiddle.net/7dfwrje7/7/（我使用了HTML字符串方法）

使用JavaScript

1 个答案: