如何使用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

創建一個元素

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";

見參考

Answer 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); 

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

演示