Я новичок в программировании, и у меня есть задача создать таблицу объектов. Я уже сделал это с помощью следующего метода, но теперь я хочу создать его с помощью метода 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>

Это работает, но я хочу сделать это с appendChild в forloop. Может ли кто-нибудь помочь мне с примером?

-1
mecnism 5 Мар 2018 в 14:20

3 ответа

Лучший ответ

Используя 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 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>
1
whitehat 5 Мар 2018 в 11:33
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>
0
Abi 5 Мар 2018 в 11:40

Код ниже даст вам представление.

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);
0
Oktay 5 Мар 2018 в 11:33