如何在 JavaScript 中的同一個 function 中添加的另一個元素中添加一個元素？

Question

我正在制作一個網站項目，我正在嘗試制作一個 function，它將新行（ <tr> ）添加到一個已經存在的空表（ <table> ）中，並在這些包含信息的行中創建單元格（ <td> ）來自a.json 文件。 第一行包含特定日期，每隔一行的第一個單元格包含人名。

除了一件事，一切都很好。 我想添加填充表格 rest 的單元格。 我將在這些單元格中放置一些關於人們日程安排的信息。 我想在同一個 function 中執行此操作，以便立即將所有內容加在一起，但由於某種原因，這個特定部分不起作用。

這是 JavaScript 代碼的示例：

for(let x in namesArray){
      let tr = document.createElement('tr')
      tr.className = "plan";
      tr.innerHTML= "<th class='name'>"+namesArray[x]+"</th>";
      document.querySelector('tbody').appendChild(tr);
};
     
for(let i = 0; i < amountOfDates; i++)
{
      document.querySelectorAll(".plan").forEach(function(y){
      let td = document.createElement('td');
      td.className = "class_plan";
      y.appendChild(td);
      });


document.querySelectorAll(".class_plan").forEach(function(x){ 
      let span = document.createElement('span');
      span.className = "description";
      x.appendChild(span);
});

當我運行代碼時，表格工作正常。 名稱顯示正確，但代碼的rest似乎不起作用。

據我了解，該代碼未使用 class“.plan”注冊任何元素，這就是其他單元格未顯示在表格中的原因。 我不確定如何克服這個問題。

表格應該是這樣的：

	日期 1	日期 2
姓名 1	單元格 1	單元格 2
姓名 2	單元格 3	單元格 4

但是相反，細胞根本不出現。

我試過將這段代碼分成兩個不同的函數，但它仍然不起作用。

Answer 1

你可以試試這個

for(let x in namesArray){
      let tr = document.createElement('tr')
      tr.className = "plan";
      tr.innerHTML= "<th class='name'>"+namesArray[x]+"</th>";

      for(let i = 0; i < amountOfDates; i++)
      {
          let td = document.createElement('td');
          td.className = "class_plan";
          let span = document.createElement('span');
          span.className = "description";
          td.appendChild(span);
          tr.appendChild(td);
      }
      document.querySelector('tbody').appendChild(tr);

};
     

Answer 2

在初始的每個循環中創建您的 TD 元素（您在其中創建行）：

 // DOM utility functions: const el = (sel, par) => (par || document).querySelector(sel); const els = (sel, par) => (par || document).querySelectorAll(sel); const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop); // My task: const namesArray = ["Name 1", "Name 2"]; const amountOfDates = 2; const elTable = el("#myTable"); const elTbody = el("tbody", elTable); namesArray.forEach((name) => { const elTR = elNew("tr", {className: `plan`}); const elTH = elNew("th", {className: `name`, textContent: name}); elTR.append(elTH); for (let i = 0; i < amountOfDates; i++) { const elTD = elNew("td", { className: `class_plan`, textContent: `Cell ${ i+1 }`}); elTR.append(elTD); } elTbody.append(elTR); });

 table { border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 0.5rem 1rem; }

 <table id="myTable"> <thead> <tr> <th></th> <th>Date 1</th> <th>Date 2</th> </tr> </thead> <tbody></tbody> </table>