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

Question

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

时遇到问题

name1       name2       name3
50          48          56

name4       name5       name6
52          58          49

使用以下格式的示例：

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

Answer 1

使用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);

Answer 2

创建元素

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

创建一个空元素并将其添加到 table:

的第一个位置

var row = table.insertRow(0);

在 "new" 元素的第 1 和第 2 个位置插入新单元格（元素）：

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

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

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

See reference

Answer 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

Answer 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

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

How to create the given html format using Javascript dom?

html

javascript

containers

dom