динамически создать таблицу в JavaScript

Question

Я хочу создать таблицу с помощью JavaScript.Это должен быть календарь назначений на мероприятия.с двумя рядами и двумя строками на событие.В первой строке указывается дата и номер события.Во второй строке указаны день недели и место проведения мероприятия.Для фазы развития у меня есть только примерный текст.Я включил мой 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

Есть несколько изменений, необходимых для достижения того, что вам нужно.Во-первых, вам нужно переместить создание строк и ячеек в цикл - в настоящее время вы создаете один набор строк вне цикла, прежде чем он начнется.

Обратите внимание, что вы не можете повторноиспользуйте один и тот же элемент строки или элемент ячейки в таблице для создания таблицы с несколькими строками и ячейками - для этого необходимо создать новые экземпляры элемента.

Также рассмотрите возможность использования методов 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>

Answer 2

Если вы вызываете appendChild на Узле, который уже является частью DOM, он удаляется из своего предыдущего местоположения и перемещается в новое.Вы должны либо клонировать перед добавлением:

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

или просто создать новые узлы внутри циклов.