Hey, gais. Maybe someone else so late at night can look at my problem. The point is this: it is necessary to add data to the HTML table created in js. I try one way, attach the listing program. It is necessary that the data be parsed from json and populated the table as (id, name, price, quantity - column names):
function createTable(parent,rows, cols) { var table = document.createElement('table'); var MyJson = [ { "id":"123","name":"iPhone XS","price": "1600","quantity":"10"}, { "id":"344","name":"Samsung Galaxy S7","price": "550","quantity":"7"}, { "id":"266","name":"Macbook","price": "900","quantity":"7"}, { "id":"478","name":"Asus","price": "400","quantity":"8"}, { "id":"569","name":"Acer","price": "300","quantity":"4"}, { "id":"788","name":"TP-LINK","price": "100","quantity":"10"}, { "id":"124","name":"iPhone SE","price": "350","quantity":"11"}, { "id":"345","name":"Samsung Galaxy Note Boom","price": "690","quantity":"8"}, { "id":"267","name":"Surface Boom","price": "690","quantity":"8"} ]; //добавление thead'а var tr1 = document.createElement('tr'); //заполнение строки tr ячейками th for (var k = 0; k < cols; k++) { var th = document.createElement('th'); tr1.appendChild(th); } table.appendChild(tr1); //добавление tbody var Myobj = JSON.parse(MyJson); for (var i=0; i< rows-1; i++) { var tr = document.createElement('tr'); for (var j = 0; j < cols; j++) { var td = document.createElement('td'); if(j===0) td.innerHTML = Myobj[i].id; else if(j===1) td.innerHTML = Myobj[i].name; else if(j===2) td.innerHTML = Myobj[i].price; else td.innerHTML = Myobj[i].quantity; tr.appendChild(td); //добавить td в tr } table.appendChild(tr); //добавить tr в table } //добавление всего table parent.appendChild(table); } I will clarify the code a bit (this is necessary): there is a button in the HTML dock, clicking on which a tab on 4 columns should appear with the headings id, name, price, quantity. To do this, in html-ke I call the createTable method, which has a reference to the parent DOM-element of the table, the number of rows and the number of columns. In the function I create a table through createElement tr, td, etc. As a result, when you press a button in the html dock, as if no script is being executed (the table is simply not visible). Html dock:
<div class="buttons"> <button class="but1" onclick="createTable(elem,11,4)"> <span class="first">Name,price</span> </button> </div> <div id="elem"><!--сюда вставляем таблицу --></div> <script> var elem = document.querySelector('#elem'); </script> </body> <script src="main.js"></script> Tell me what's wrong here
