使用JavaScript重新创建元素的更有效方式

我有一个HTML表格，其中每行都是可点击的，并充当手风琴。当单击该行时，每行下方都会显示一些元素（另一个表，其他几个div元素等）。下面是与功能的小提琴：使用JavaScript重新创建元素的更有效方式

的问题是，如果我有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">

我有一个回路，该回路I”我已经用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，没有图书馆。任何建议将不胜感激。

来源

2015-11-01 Rebecca

'copy_tr = parent_tr_node。cloneNode（true）;'然后通过孩子设置值可能会更便宜。同样，你可以写一个_function_并且每次都传递你想要的东西。此外，是否真的有必要嵌套表格？ –

谢谢您的建议。是的，我知道嵌套表不好，但在这种情况下，我需要拥有它们。 – Rebecca

会createDocumentFragment帮助吗？ http://jsperf.com/createelement-vs-createdocumentfragment –

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

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

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

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

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

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

来源

2015-11-01 20:17:24 ghybs

谢谢你的帮助，我采取了这种方法 – Rebecca

使用JavaScript重新创建元素的更有效方式

回答

相关问题