html table表格动态显示

作者：System 时间：2024年08月21日分类：所有,html 字数：1025

要在HTML中动态显示表格，可以使用JavaScript来操作DOM元素。以下是一个简单的例子，展示了如何使用JavaScript向表格中添加行：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Table</title>
</head>
<body>
 
<table id="myTable" border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
</table>
 
<script>
// 假设有一个人员数组
var people = [
  { name: "John", age: 30, city: "New York" },
  { name: "Doe", age: 25, city: "Los Angeles" },
  // 更多人员数据...
];
 
// 函数：添加一行到表格
function addRow(data) {
  var table = document.getElementById("myTable");
  var newRow = table.insertRow(-1); // 在表格末尾添加新行
  
  var cell1 = newRow.insertCell(0);
  cell1.textContent = data.name;
  var cell2 = newRow.insertCell(1);
  cell2.textContent = data.age;
  var cell3 = newRow.insertCell(2);
  cell3.textContent = data.city;
}
 
// 动态添加数据到表格
people.forEach(function(person) {
  addRow(person);
});
</script>
 
</body>
</html>

这段代码中，我们定义了一个people数组来模拟数据，然后使用forEach方法遍历这个数组，并调用addRow函数来为每个人添加一行到表格中。这样，表格就能动态地根据数据显示行了。

html table表格动态显示

评论已关闭

推荐阅读