JavaScript创建动态表

问题描述 投票:1回答:2

我想用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行,在每个单元中的内容“示例”的表。但它不工作

javascript dom
2个回答
0
投票

如果调用appendChild到一个节点是已经DOM的一部分,它会从它以前的位置取出并转移到新的一个。你要么追加前克隆:

line1.appendChild(cell_date.cloneNode(true));

或者只是创建环路内新节点。


0
投票

还有的达到你需要什么需要一些改动。首先,你需要移动你行和单元格创建内环路 - 目前正在创建一组行的循环之外,它开始之前。

还需要注意的是,你不能再次使用相同的行元素,或电池元件在表中生成多个行和单元格的表 - 你需要创建新的元素实例来实现这一目标。

如下图所示还可以考虑使用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>
© www.soinside.com 2019 - 2024. All rights reserved.