如何使用 Javascript dom 创建给定的 html 格式？答案

【问题标题】：How to create the given html format using Javascript dom?如何使用 Javascript dom 创建给定的 html 格式？
【发布时间】：2015-08-12 09:36:22
【问题描述】：

我必须使用文档对象模型以如下格式打印数据。我在创建以下 html 时遇到问题。

name1       name2       name3
50          48          56

name4       name5       name6
52          58          49

使用以下格式的示例：

  var table = document.createElement("table");
  var row = document.createElement("row");

【问题讨论】：

没有名为 'row' 的 domelement 你看过html5 tables spec
看看@birdspider 提到的 createElement、appendChild 和 html 表格规范
此刻数据存储在哪里？是数组还是对象？

标签： javascript html dom containers

【解决方案1】：

创建一个元素

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

创建一个空元素并将其添加到表格的第一个位置：

var row = table.insertRow(0);

在“新”元素的第一个和第二个位置插入新的单元格（元素）：

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

// 向新单元格添加一些文本：

cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

See reference

【讨论】：

【解决方案2】：

使用tr 而不是row

var row0 = document.createElement("tr");

这里是您想要做的事情的快速入门：

var table = document.createElement("table");
var row0 = document.createElement("tr");
var a0 = document.createElement("td");
a0.textContent = "name1";
var a1 = document.createElement("td");
a1.textContent = "name2";
var a2 = document.createElement("td");
a2.textContent = "name3";

var row1 = document.createElement("tr");
var b0 = document.createElement("td");
b0.textContent = "50";
var b1 = document.createElement("td");
b1.textContent = "48";
var b2 = document.createElement("td");
b2.textContent = "56";

row0.appendChild(a0);
row0.appendChild(a1);
row0.appendChild(a2);

row1.appendChild(b0);
row1.appendChild(b1);
row1.appendChild(b2);

table.appendChild(row0);
table.appendChild(row1);

document.body.appendChild(table);

【讨论】：

【解决方案3】：

我们可以使用table的insertRow函数来创建新行。

找到下面的代码：

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

  //to create first row
    var row = table.insertRow(0);

  // first row columns
    var col = row.insertCell(0);
    col.textContent = "name1";

    col = row.insertCell(1);
    col.textContent = "name2";

    col = row.insertCell(2);
    col.textContent = "name3";

  // for second row
    row = table.insertRow(1);

  // for second row columns 
    col = row.insertCell(0);
    col.textContent = "50";

    col = row.insertCell(1);
    col.textContent = "48";

    col = row.insertCell(2);
    col.textContent = "56";

  document.body.appendChild(table);

jsfiddle

【讨论】：

【解决方案4】：

如果您将数据存储在对象中，您可以通过编程方式执行此操作：

var data = {
    name1: 50,
    name2: 48,
    name3: 56,
    name4: 52,
    name5: 58,
    name6: 49
};

function buildTable(data) {

    // grab the headings from the object
    var headings = Object.keys(data);
    var cells = [], rows = [];

    // for each heading, push it and its data value into the cell array
    headings.forEach(function (heading, i) {
        var value = data[headings[i]];
        cells.push('<td>' + heading + '<br/>' + value + '</td>');

        // when we reach the end of the row, brace the cell data with
        // row tags, and clear the cells array
        if ((i + 1) % 3 === 0) {
            rows = rows.concat('<tr>' + cells.join('') + '</tr>');
            cells = [];
        }
    });

    // return the complete table html
    return '<table>' + rows.join('') + '</table>'
}

// grab the body tag and insert the table html as the first child
var body = document.querySelector('body');
body.insertAdjacentHTML('afterbegin', buildTable(data));

DEMO

【讨论】：