使用createDocumentFragment（）来添加表行 [英] Use createDocumentFragment() to add a table row

问题描述

更新 - 这是11月26日星期一完整重写问题

---

这段代码工作：

  name_this_table =station_list+ i; 
 station_table = document.getElementById（name_this_table）; 
 
（station_detail中的station_index）
 {
 newRow = station_table.getElementsByTagName（tbody）[0] .insertRow（-1）; 
 
 newCell = newRow.insertCell（-1）; 
 newCell.appendChild（document.createTextNode（one））; 
 
 newCell = newRow.insertCell（-1）; 
 newCell.appendChild（document.createTextNode（two））; 
 newRow = null; 
} 
  

但是我想使用 createDocumentFragment（） code>，如下所示：

  name_this_table =station_list+ i; 
 station_table = document.getElementById（name_this_table）; //注1 
 // station_table = document.getElementById（name_this_table）.tBodies [0]; 
 
 var tableFrag; 
 tableFrag = document.createDocumentFragment（）; 
 tableFrag.appendChild（station_table）; // $ 2 
 
（station_detail中的station_index）
 {
 newRow = station_table.getElementsByTagName（tbody）[0] .insertRow（-1）; //注3 
 // newRow = tableFrag.getElementsByTagName（tbody）[0] .insertRow（-1）; 
 newCell = newRow.insertCell（-1）; 
 newCell.appendChild（document.createTextNode（one））; 
 
 newCell = newRow.insertCell（-1）; 
 newCell.appendChild（document.createTextNode（two））; 
 newRow = null; 
} 
 document.getElementById（name_this_table）.appendChild（tableFrag）; 
  

我有各种错误报告 - 不是运行时错误，但渲染停止。 p>



• 注1（上图） - 我已经尝试了下面的行（使用 tbodies ）作为
  替代品。


• 注2 - 如果我取消注释此行，那么渲染会在此时停止
  。


• 注3 - 这里我试图使用tableFrag ...

解决方案

新答案周二发布11/27

经过大量的实验，这个工作。我希望有任何反馈（一方面，我不知道我是否看到表现获得。

  name_this_table = station_list+ i; 
 station_table = document.getElementById（name_this_table）; 
 
 var tableFrag; 
 tableFrag = document.createDocumentFragment（）; 
 tableFrag.appendChild station_table）; //注释2 
 
（station_detail中的station_index）
 {
 station_id = station_detail [station_index] [station_id]; 
 var newRow; 
 newRow = document.createDocumentFragment（）; 
 newRow = station_table.getElementsByTagName（tbody）[0] .insertRow（-1）; 
 
 newCell = newRow.insertCell（ - 1）; 
 newCell.appendChild（document.createTextNode（one））; 
 
 ... 
 
 station_table.appendChild（newRow）; 
 newRow = null; 
} 
  

UPDATE -- this is a complete rewrite of the question on Monday 11/26

---

This code works:

name_this_table = "station_list"+i;
station_table = document.getElementById(name_this_table);

for (station_index in station_detail)
{
    newRow = station_table.getElementsByTagName("tbody")[0].insertRow(-1);

    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("one"));

    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("two"));
    newRow = null;
}

But I want to use createDocumentFragment(), like this:

name_this_table = "station_list"+i;
station_table = document.getElementById(name_this_table);  // NOTE 1
//station_table = document.getElementById(name_this_table).tBodies[0];

var tableFrag;
tableFrag = document.createDocumentFragment();
tableFrag.appendChild(station_table);  // NOTE 2

for (station_index in station_detail)
{
    newRow = station_table.getElementsByTagName("tbody")[0].insertRow(-1); // NOTE 3
  //newRow = tableFrag.getElementsByTagName("tbody")[0].insertRow(-1);
    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("one"));

    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("two"));
    newRow = null;
}        
document.getElementById(name_this_table).appendChild(tableFrag);

I have various failures to report -- not run-time errors, but the rendering stops.

• NOTE 1 (above) -- I have tried the line below (uses tbodies) as an alternative.
• NOTE 2 -- If I uncomment this line, the rendering stops at that point.
• NOTE 3 -- Here I am trying to use the tableFrag ...

解决方案

NEW ANSWER posted Tuesday 11/27

After a lot of experimenting, this works. I'd love any feedback (for one thing, I'm not sure I'm seeing a performance gain.

name_this_table = "station_list"+i;
station_table = document.getElementById(name_this_table);  

var tableFrag;
tableFrag = document.createDocumentFragment();
tableFrag.appendChild(station_table);  // NOTE 2

for (station_index in station_detail)
{
    station_id = station_detail[station_index]["station_id"];
    var newRow;
    newRow = document.createDocumentFragment();
    newRow = station_table.getElementsByTagName("tbody")[0].insertRow(-1);

    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("one"));

    ...

    station_table.appendChild(newRow);
    newRow = null;
} 

这篇关于使用createDocumentFragment（）来添加表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！