Question

我想用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行的表，内容为“ example”。但这不起作用

Answer 1

如果将appendChild调用到已经是DOM一部分的Node上，则会将其从其先前位置删除并移至新位置。您必须先克隆才能添加：

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

或仅在循环内部创建新节点。

Answer 2

只需很少改动即可实现所需的功能。首先，您需要在行内移动行和单元格的创建-当前，您要在循环外创建一组行，然后再开始。

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

还考虑使用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>

JavaScript创建动态表

2 个答案: