在不利用vue实现循环数据输入到表格

luo9tian / 2023-08-16 / 原文

如果您不使用Vue或其他前端框架，可以使用原生的JavaScript来实现将循环数据输入到表格中的操作。

首先，您需要一个包含要展示数据的数组。然后，使用JavaScript循环遍历数据数组，动态创建表格的行和单元格，并将数据填充到相应的单元格中。

下面是一个示例代码，展示了如何使用JavaScript将循环数据输入到表格中：

<!DOCTYPE html>
<html>
<head>
  <title>循环数据输入到表格</title>
  <style>
    table {
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 5px;
    }
  </style>
</head>
<body>
  <table id="myTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格主体内容将通过JavaScript动态生成 -->
    </tbody>
  </table>

  <script>
    // 假设有一个包含数据的数组
    var data = [
      { name: 'John', age: 25 },
      { name: 'Alice', age: 30 },
      { name: 'Bob', age: 35 }
    ];

    // 获取表格主体元素
    var tbody = document.querySelector('#myTable tbody');

    // 循环遍历数据数组
    for (var i = 0; i < data.length; i++) {
      var row = document.createElement('tr'); // 创建表格行

      var nameCell = document.createElement('td'); // 创建单元格
      nameCell.textContent = data[i].name; // 填充单元格内容
      row.appendChild(nameCell); // 将单元格添加到行中

      var ageCell = document.createElement('td');
      ageCell.textContent = data[i].age;
      row.appendChild(ageCell);

      tbody.appendChild(row); // 将行添加到表格主体中
    }
  </script>
</body>
</html>

上述代码中，首先定义了一个包含数据的数组 data，然后使用 JavaScript 动态创建表格行和单元格，并将数据填充到相应的单元格中。最后，将生成的行添加到表格的主体部分。

通过这种方式，您可以根据数据数组动态生成表格内容，而无需使用Vue或其他前端框架。