我想用JavaScript来创建一个表。它应该是事件约会压延机。具有两行和每个事件两行。在第一行是datenumber和事件的类型。在第二行是平日和地方,那里的事件是。对于发展的阶段,我只有一个文本为例。我包括我的js文件在我的HTML文件,但没有一个表。有人可以检查我的代码,因为我没有找到一个错误
function dates(){
var test = 31;
var rows = 2;
var text_bsp = "example";
var tab = document.createElement("table");
var line1 = document.createElement("tr");
var line2 = document.createElement("tr");
var cell_date = document.createElement("td");
var cell_event = document.createElement("td");
var cell_day = document.createElement("td");
var cell_place = document.createElement("td");
var ausgabe = document.getElementById('content-container');
ausgabe.appendChild(tab);
for(var i=1;i < 32; i++)
{
tab.appendChild(line1);
for(var j=0;j<3;j++)
{
line1.appendChild(cell_date);
cell_date.createTextNode(text_bsp);
line1.appendChild(cell_event);
cell_event.createTextNode(text_bsp);
}
tab.appendChild(line2);
for(var k=0;j<3;k++){
line2.appendChild(cell_date);
cell_date.createTextNode(text_bsp);
line2.appendChild(cell_place);
cell_place.createTextNode(text_bsp);
}
}
}
我预期有62行和2行,在每个单元中的内容“示例”的表。但它不工作
如果调用appendChild
到一个节点是已经DOM的一部分,它会从它以前的位置取出并转移到新的一个。你要么追加前克隆:
line1.appendChild(cell_date.cloneNode(true));
或者只是创建环路内新节点。
还有的达到你需要什么需要一些改动。首先,你需要移动你行和单元格创建内环路 - 目前正在创建一组行的循环之外,它开始之前。
还需要注意的是,你不能再次使用相同的行元素,或电池元件在表中生成多个行和单元格的表 - 你需要创建新的元素实例来实现这一目标。
如下图所示还可以考虑使用insertRow()
,insertCell()
和document.createTextNode()
方法:
function dates() {
var test = 31;
var rows = 2;
var text_bsp = "example";
var tab = document.createElement("table");
var ausgabe = document.getElementById('content-container');
ausgabe.appendChild(tab);
for (var i = 1; i < 32; i++) {
/*
Create line1 row inside of for loop, to produce
a new line for each iteration
*/
var line1 = tab.insertRow(line1);
for (var j = 0; j < 3; j++) {
/*
Create new cell_date and cell_event cells for
the current row we're creating
*/
var cell_date = line1.insertCell();
var cell_event = line1.insertCell();
/*
Create new text nodes for each cell via document
and append these to respective cell elements
*/
cell_date.append(document.createTextNode(text_bsp));
cell_event.append(document.createTextNode(text_bsp));
}
/*
As before, create line2 row inside of for loop
*/
var line2 = tab.insertRow();
for (var k = 0; j < 3; k++) {
var cell_date = line2.insertCell();
var cell_place = line2.insertCell();
cell_date.append(document.createTextNode(text_bsp));
cell_place.append(document.createTextNode(text_bsp));
}
}
}
dates();
<div id="content-container"></div>