用DOM动态创建表 [英] Dynamic creation of table with DOM

问题描述

有人可以告诉我这段代码有什么问题吗？我想创建一个具有2列和3行的表，在单元格中，我想要在每一行上使用Text1和Text2。此代码创建一个包含2列和3行的表，但它只是第三行中单元格中的文本（其他为空）。

  var tablearea = document.getElementById（'tablearea'）; 
 
 var table = document.createElement（'table'）; 
 
 var tr = []; 
 
 var td1 = document.createElement（'td'）; 
 var td2 = document.createElement（'td'）; 
 
 var text1 = document.createTextNode（'Text1'）; 
 var text2 = document.createTextNode（'Text2'）; （var i = 1; i< 4; i ++）{
 tr [i] = document.createElement（'tr'）; 
 
 
 for（var j = 1; j< 4; j ++）{
 td1.appendChild（text1）; 
 td2.appendChild（text2）; 
 tr [i] .appendChild（td1）; 
 tr [i] .appendChild（td2）; 
} 
 table.appendChild（tr [i]）; 
 
} 
 
 tablearea.appendChild（table）; 
  

解决方案

您必须在循环中创建td和文本节点。您的代码仅创建2 td，因此只有2个可见。示例：

  var table = document.createElement（'table'）; （var i = 1; i< 4; i ++）
 {
 var tr = document.createElement（'tr'）; 
 
 var td1 = document.createElement（'td'）; 
 var td2 = document.createElement（'td'）; 
 
 var text1 = document.createTextNode（'Text1'）; 
 var text2 = document.createTextNode（'Text2'）; 
 
 td1.appendChild（text1）; 
 td2.appendChild（text2）; 
 tr.appendChild（td1）; 
 tr.appendChild（td2）; 
 
 table.appendChild（tr）; 
} 
 document.body.appendChild（table）; 
  

Can someone tell me what's wrong with this code? I want to create a table with 2 columns and 3 rows, and in the cells I want Text1 and Text2 on every row. This code creates a table with 2 columns and 3 rows, but it's only text in the cells in the third row (the others are empty).

var tablearea = document.getElementById('tablearea');

var table = document.createElement('table');

var tr = [];

var td1 = document.createElement('td');
var td2 = document.createElement('td');

var text1 = document.createTextNode('Text1');
var text2 = document.createTextNode('Text2');

for (var i = 1; i < 4; i++){
    tr[i] = document.createElement('tr');   
    for (var j = 1; j < 4; j++){
        td1.appendChild(text1);
        td2.appendChild(text2);
        tr[i].appendChild(td1);
        tr[i].appendChild(td2);
    }           
    table.appendChild(tr[i]);

}

tablearea.appendChild(table);

解决方案

You must create td and text nodes within loop. Your code creates only 2 td, so only 2 are visible. Example:

var table = document.createElement('table');
for (var i = 1; i < 4; i++){
    var tr = document.createElement('tr');   

    var td1 = document.createElement('td');
    var td2 = document.createElement('td');

    var text1 = document.createTextNode('Text1');
    var text2 = document.createTextNode('Text2');

    td1.appendChild(text1);
    td2.appendChild(text2);
    tr.appendChild(td1);
    tr.appendChild(td2);

    table.appendChild(tr);
}
document.body.appendChild(table);

这篇关于用DOM动态创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！