Create table using appendChild()

Question

I'm new to programming and I have a task to create a table of objects. I have done it already with the following method, but now, I want to create it using the appendChild method.

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>

This works, but I want to do this with appendChild in a forloop. Can someone help me with an example?

Answer 1

using appendChild : Creating a HTML Table Dynamically

Follow the above link, you will learn to do so.

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>