使用 appendChild() 创建 table

Question

我是编程新手，我的任务是创建 table 个对象。我已经用下面的方法完成了，但是现在，我想用 appendChild 方法创建它。

function insertObject() {

  var data = [{
      "nodeid": 1,
      "vendor": "0x0345",
      "product_id": "0x0201",
      "product_type": "0x0008",
      "home_id": "0xD087E344",
      "secure": "1",
      "button": "-",
    },
    {
      "nodeid": 2,
      "vendor": "0x0285",
      "product_id": "0x0777",
      "product_type": "0x0001",
      "home_id": "0xD087D213",
      "secure": "0",
      "button": "-",
    },
    {
      "nodeid": 3,
      "vendor": "0x1145",
      "product_id": "0x7899",
      "product_type": "0x0851",
      "home_id": "0xD034T13",
      "secure": "0",
      "button": "-",
    },
    {
      "nodeid": 4,
      "vendor": "0x8992",
      "product_id": "0x1236",
      "product_type": "0x8101",
      "home_id": "0xD0682F13",
      "secure": "1",
      "button": "-",
    }
  ]

  var k = '<tbody>';
  for (i = 0; i < data.length; i++) {
    k += '<tr>';
    k += '<td>' + data[i].nodeid + '</td>';
    k += '<td>' + data[i].vendor + '</td>';
    k += '<td>' + data[i].product_id + '</td>';
    k += '<td>' + data[i].product_type + '</td>';
    k += '<td>' + data[i].home_id + '</td>';
    k += '<td>' + data[i].secure + '</td>';
    k += '<td>' + data[i].button + '</td>';
    k += '</tr>';
  }
  k += '</tbody>';
  document.getElementById('tableData').innerHTML = k;
}

insertObject();

<table id="tableData"></table>

这可行，但我想在 forloop 中使用 appendChild 来执行此操作。有人可以帮我举个例子吗？

Answer 1

下面的代码会给你一个想法。

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

//for each data row
var tr = document.createElement("tr");

//for each data row's column add below
var td = document.createElement("td");
td.innerText=data[i].home_id;
tr.appendChild(td);

//end of the row
table.appendChild(tr);

Answer 2

使用 appendChild ：Creating a HTML Table Dynamically

按照上面的link，你会学会的。

function insertObject() {


  var data = [{
      "nodeid": 1,
      "vendor": "0x0345",
      "product_id": "0x0201",
      "product_type": "0x0008",
      "home_id": "0xD087E344",
      "secure": "1",
      "button": "-",
    },
    {
      "nodeid": 2,
      "vendor": "0x0285",
      "product_id": "0x0777",
      "product_type": "0x0001",
      "home_id": "0xD087D213",
      "secure": "0",
      "button": "-",
    },
    {
      "nodeid": 3,
      "vendor": "0x1145",
      "product_id": "0x7899",
      "product_type": "0x0851",
      "home_id": "0xD034T13",
      "secure": "0",
      "button": "-",
    },
    {
      "nodeid": 4,
      "vendor": "0x8992",
      "product_id": "0x1236",
      "product_type": "0x8101",
      "home_id": "0xD0682F13",
      "secure": "1",
      "button": "-",
    }
  ]

  var tbl = document.getElementById('tableData');
  var tblBody = document.createElement("tbody");
  // creates a <tbody> element
  for (var i = 0; i < data.length; i++) {
    // creates a table row
    var row = document.createElement("tr");
    for (var prop in data[i]) {
      // Create a <td> element and a text node, make the text
      // node the contents of the <td>, and put the <td> at
      // the end of the table row
      var cell = document.createElement("td");
      var cellText = document.createTextNode(data[i][prop]);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }

    // add the row to the end of the table body
    tblBody.appendChild(row);
  }
  // add the table body to the table
  tbl.appendChild(tblBody);
  /*
      var k = '<tbody>';
      for(i = 0; i < data.length; i++){
         k+= '<tr>';
         k+= '<td>' + data[i].nodeid + '</td>';
         k+= '<td>' + data[i].vendor + '</td>';
         k+= '<td>' + data[i].product_id + '</td>';
         k+= '<td>' + data[i].product_type + '</td>';
         k+= '<td>' + data[i].home_id + '</td>';
         k+= '<td>' + data[i].secure + '</td>';
         k+= '<td>' + data[i].button + '</td>';
         k+= '</tr>';
       }
         k+='</tbody>';
         document.getElementById('tableData').innerHTML = k;*/
}

insertObject();

table{
  border-collapse:collapse;
}
td{
  border:1px solid #000;
  padding:5px;
}

<table id="tableData"></table>

Answer 3

function insertObject() {

  var data = [{
      "nodeid": 1,
      "vendor": "0x0345",
      "product_id": "0x0201",
      "product_type": "0x0008",
      "home_id": "0xD087E344",
      "secure": "1",
      "button": "-",
    },
    {
      "nodeid": 2,
      "vendor": "0x0285",
      "product_id": "0x0777",
      "product_type": "0x0001",
      "home_id": "0xD087D213",
      "secure": "0",
      "button": "-",
    },
    {
      "nodeid": 3,
      "vendor": "0x1145",
      "product_id": "0x7899",
      "product_type": "0x0851",
      "home_id": "0xD034T13",
      "secure": "0",
      "button": "-",
    },
    {
      "nodeid": 4,
      "vendor": "0x8992",
      "product_id": "0x1236",
      "product_type": "0x8101",
      "home_id": "0xD0682F13",
      "secure": "1",
      "button": "-",
    }
  ]
  var myTable = document.getElementById('tableData');
  for (i = 0; i < data.length; i++) {
    var row = document.createElement('tr');
    var rowObj = data[i];
    for (var key in rowObj) {
      var dataEl = document.createElement('td');
      dataEl.innerText = rowObj[key];
      row.appendChild(dataEl);
    }
    myTable.appendChild(row);
  }
}

insertObject();

<table id="tableData"></table>

使用 appendChild() 创建 table

Create table using appendChild()

html

javascript

html-table

appendchild