如何使用 JavaScript 创建空表数据框？答案

【问题标题】：How do I create the empty table data boxes with JavaScript?如何使用 JavaScript 创建空表数据框？
【发布时间】：2015-04-28 20:56:41
【问题描述】：

我希望能够在不使用任何 html 并且只编写 JavaScript 的情况下创建这样的 html 表。

如何使用 JavaScript 创建空表数据框？

table {
  border: 1px solid black;
  }
th {
  border: 1px solid blue;
  }
td {
  border: 1px solid red;
  }

<!DOCTYPE html>
<html>
<head></head>
<body>
  <table>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th>Three</th>
    </tr>
    <tr>
      <th>A</th>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>B</th>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>C</th>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>
<html>

【问题讨论】：

你使用的是纯javascript还是jQuery之类的库？
<table> 元素的 HTML 语法不正确。 <th> 标签只能用作表格标题单元格。
我有 jQuery 和 lodash.js

标签： javascript html for-loop foreach

【解决方案1】：

试试这个：

var myTableRows = [
    [{"th":"One"},{"th":"Two"},{"th":"Three"}],
    [{"th":"A"},{"td":""},{"td":""}],
    [{"th":"B"},{"td":""},{"td":""}],
    [{"th":"C"},{"td":""},{"td":""}]
];

var table = document.createElement("table");
for(var rowIndex in myTableRows) {
    var row = document.createElement("tr");
    for(var colIndex in myTableRows[rowIndex]) {
        for(var tag in myTableRows[rowIndex][colIndex]) {
            var cell = document.createElement(tag);
            var cellContents = document.createTextNode(myTableRows[rowIndex][colIndex][tag]);
            cell.appendChild(cellContents);
            row.appendChild(cell);
        }
    }
    table.appendChild(row);
}
document.body.appendChild(table);

【讨论】：