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

Question

I have to get the data printed like the below format using document object model. I am having the problem in creating the below html.

name1       name2       name3
50          48          56

name4       name5       name6
52          58          49

example using below format:

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

Answer 1

Create a element

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

Create an empty element and add it to the 1st position of the table:

var row = table.insertRow(0);

Insert new cells ( elements) at the 1st and 2nd position of the "new" element:

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

// Add some text to the new cells:

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

See reference

Answer 2

Use tr instead of row

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

Here is a quick start for what you want to do:

 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

We can use insertRow function of table to create new row.

find the below code:

  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

If you have your data stored in an object you can do this programmatically:

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