如何使用JavaScript填充表格？

Question

如何以适当的方式使用JavaScript填充表格？

function loadTableData() {

  //0: Date
  //1: Name

  var row = document.getElementById("test");

  var x = row.insertCell(0);
  x.innerHTML = "10/17/2018";

  var x = row.insertCell(1);
  x.innerHTML = "john doe";

}

<table id="myTable" class="table table-borderless table-striped table-earning">
  <thead>
    <tr>
      <th>date</th>
      <th>file name</th>
    </tr>
  </thead>
  <tbody>
    <tr id="test"></tr>
  </tbody>
</table>
<script>loadTableData();</script>

我的当前代码填充了前两个单元格，但我想移动到下一列并填充另外两个单元格。我不确定如何以正确的方式做到这一点。

当前输出

- lovelaceada

---

您需要添加一行新的数据，然后填充它。 - Rno

Answer 1

关键在于遍历您的数据并使用insertRow在插入数据之前创建一行。您可以看到在这个例子中，tbody元素为空，每个tr元素都是动态创建的。

<table id="myTable" class="table table-borderless table-striped table-earning">
  <thead>
    <tr>
      <th>date</th>
      <th>file name</th>
    </tr>
  </thead>
  <tbody id="testBody"></tbody>
</table>
<script>
  const items1 = [
    { date: "10/17/2018", name: "john doe" },
    { date: "10/18/2018", name: "jane doe" },
  ];
  const items2 = [
    { date: "10/17/2019", name: "john doe" },
    { date: "10/18/2019", name: "jane doe" },
  ];
  function loadTableData(items) {
    const table = document.getElementById("testBody");
    items.forEach( item => {
      let row = table.insertRow();
      let date = row.insertCell(0);
      date.innerHTML = item.date;
      let name = row.insertCell(1);
      name.innerHTML = item.name;
    });
  }
  loadTableData(items1);
  loadTableData(items2);
  loadTableData([]);
</script>

- borrascador

---

如果我不想让这些项目是常量怎么办？如果我根据用户的需求动态加载它们，他们可能没有或者有超过两个，该怎么办？ - lovelaceada

我如何在不使用常量的情况下分配项目。比如说，我有一个字符串循环，我通过它来分配项目。 - lovelaceada

你所需要做的就是将 items 作为参数传递给函数。我已经进行了调整以反映这一点。它还可以处理空数组。你可以将代码更改为仅使用字符串而不是对象，但我认为如果你在这个应用程序中坚持使用对象，你的代码将更容易处理。 - borrascador

或者以某种方式附加一个数组项。 - lovelaceada

Answer 2

如其他回答者所提到的，您需要使用DOM来处理文档。将所有内容视为HTML中的元素。

var table = document.getElementById("myTable");

var rowNode = document.createElement("tr");
var cellNode = document.createElement("td");
var textNode = document.createTextNode("John Doe");

cellNode.appendChild(textNode);
rowNode.appendChild(cellNode);
table.appendChild(rowNode);

如果需要与表格DOM元素进行更进一步的交互，可以参考W3C规范（DOM接口）。

- Sean Aitken

Answer 3

    const courses = [{
    "Name": "Communications",
    "Date": "22 April 2022",
    "Code": "CS368"                
    },
    {
    "Name": "Programming",
    "Date": "22 April 2021",
    "Code": "CS368"                
    },
    {
    "Name": "Networks",
    "Date": "22 April 2002",
    "Code": "CS368"                
    }]
const table = document.getElementById("tableBody");
courses.map(course=>{
   let row = table.insertRow();
   let name = row.insertCell(0);
   name.innerHTML = course.Name;
   let date = row.insertCell(1);
   date.innerHTML = course.Date;
   let code = row.insertCell(2);
   code.innerHTML = course.Code;
});         
   

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-sm">
         <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Code</th>                                              
            </tr>
         </thead>
         <tbody id="tableBody">
           
         </tbody>
   </table>
  

- Wisdom Jere

Answer 4

虽然我不是HTML专家，但是：

我认为你需要使用element.appendChild()来添加你创建的子元素。你不应该使用innerHTML，而是使用文档对象模型中内置的方法。

- S Graham