时间戳

首页 > 解决方案 > 如何使用 Javascript 数组构建 HTML 表格

javascript - 如何使用 Javascript 数组构建 HTML 表格

问题描述

如果我在 Javascript 中有以下数组，

var data = ["Last name", "First name", "Phone Number", "Location"]
["Doe", "John", "555-5555", "SYDNEY"]
["Garr", "Nancy", "555-5555", "SYDNEY"]
["Castro", "Judith", "555-5555", "SYDNEY"]
["Lynch", "Amanda", "555-5555", "SYDNEY"]

如何遍历它以构建一个 HTML 表格，该表格仅列出姓名和电话号码（如下所示）？

姓名 电话号码 姓名 电话号码
能源部，约翰 555-5555 加尔，南希 555-5555
卡斯特罗，朱迪思 555-5555 林奇，阿曼达 555-5555

这是我尝试过的 Javascript，它工作得相当好，但它并没有填充所有的列。

var table = document.getElementById("myTable");
var i;
var j;
var row;
var cell;
for (i = 1; i < data.length; i++) {
  row = table.insertRow();
  var j;
    for (j = 0; j < 2; j++) {
      cell = row.insertCell(j);
      if (j === 0) {
        cell.innerHTML = data[i][j] + ", " + data[i][j+1]; // format name as last, first
      } else if (j === 1) {
        cell.innerHTML = data[i][j+1];
      }
   }
}
姓名 电话号码 姓名 电话号码
能源部，约翰 555-5555
加尔，南希 555-5555
卡斯特罗，朱迪思 555-5555
林奇，阿曼达 555-5555

任何帮助表示赞赏！

标签： javascripthtmlarraysfor-loophtml-table

解决方案

每 2 次只创建一行。使用mod获取余数可以让您知道是否该创建新行了。

var data = [
  ["Last name", "First name", "Phone Number", "Location"],
  ["Doe", "John", "555-5555", "SYDNEY"],
  ["Garr", "Nancy", "555-5555", "SYDNEY"],
  ["Castro", "Judith", "555-5555", "SYDNEY"],
  ["Lynch", "Amanda", "555-5555", "SYDNEY"],
];

var table = document.getElementById("myTable");
var i;
var j;
var row;
var cell;
for (i = 1; i < data.length; i++) {
  if ((i - 1) % 2 === 0) row = table.insertRow();
  var j;
  for (j = 0; j < 2; j++) {
    cell = row.insertCell(j);
    if (j === 0) {
      cell.innerHTML = data[i][j] + ", " + data[i][j+1]; // format name as last, first
    } else if (j === 1) {
      cell.innerHTML = data[i][j+1];
    }
  }
}
<table id="myTable"></table>

推荐阅读