json写到table—代码示例

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

JSON是一种常用的数据格式，它具有简洁、易读的特点，常用于数据的传输和存储。在网页开发中，我们经常需要将JSON数据展示在表格中，以便用户查看和操作。下面是一个示例代码，演示了如何将JSON数据写入到HTML表格中。

我们需要一个包含JSON数据的变量。在这个示例中，我们使用一个包含学生信息的JSON数组作为数据源。每个学生对象包含姓名、年龄和成绩三个属性。


var students = [
  { "name": "张三", "age": 20, "score": 90 },
  { "name": "李四", "age": 22, "score": 85 },
  { "name": "王五", "age": 21, "score": 95 }
];

接下来，我们需要创建一个HTML表格，并使用JavaScript动态生成表格的内容。我们可以使用`createElement`函数创建`table`元素，并使用`appendChild`函数将其添加到页面中的某个元素中。


var table = document.createElement("table");
document.body.appendChild(table);

然后，我们需要遍历JSON数组，逐个生成表格的行和单元格。我们可以使用`forEach`函数或者`for`循环来遍历数组。在每次遍历中，我们创建一个新的行元素`tr`，并将其添加到表格中。


students.forEach(function(student) {
  var row = document.createElement("tr");
  table.appendChild(row);
});

接下来，我们需要为每个学生对象创建对应的单元格，并将其添加到行中。我们可以使用`createElement`函数创建`td`元素，并使用`appendChild`函数将其添加到行中。


students.forEach(function(student) {
  var row = document.createElement("tr");
  table.appendChild(row);
  var nameCell = document.createElement("td");
  nameCell.textContent = student.name;
  row.appendChild(nameCell);
  var ageCell = document.createElement("td");
  ageCell.textContent = student.age;
  row.appendChild(ageCell);
  var scoreCell = document.createElement("td");
  scoreCell.textContent = student.score;
  row.appendChild(scoreCell);
});

我们可以将生成的表格样式进行美化，以提高用户的浏览体验。比如，我们可以添加表格的边框、设置表头等。


table.style.border = "1px solid black";
var headerRow = document.createElement("tr");
table.appendChild(headerRow);
var nameHeader = document.createElement("th");
nameHeader.textContent = "姓名";
headerRow.appendChild(nameHeader);
var ageHeader = document.createElement("th");
ageHeader.textContent = "年龄";
headerRow.appendChild(ageHeader);
var scoreHeader = document.createElement("th");
scoreHeader.textContent = "成绩";
headerRow.appendChild(scoreHeader);

通过以上步骤，我们成功将JSON数据写入到了HTML表格中，并对表格进行了简单的美化。用户可以通过查看表格来获取学生的姓名、年龄和成绩等信息。

json写到table—代码示例

相关阅读