如何使用javascript在数据透视表中插入：nth-​​child（x）和：before？

Question

The problem with everything is that the data from the table comes from a database, through an API, so the table is dynamically created and therefore I can not use the CSS for this, remembering that the code below is jotted the data from the table in an array ..

I would like to transform this css below into Javascript, because my table is dynamic and has no way of knowing the amount of tr and td ...

 const DATA = { "Informacoes": { "qtRows": 3, "qtCols": 6, "Cabecalho": ["Id", "Encontro", "Nome", "Preco", "Quantidade", "Total"] }, "Produtos":[ { "Id": 200396, "Encontro": '2017-09-26 01:22', "Nome": 'Controlador do console de jogos', "Preco": 22.00, "Quantidade": 2, "Total": 44.00 }, { "Id": 200397, "Encontro": '2017-09-28 05:57', "Nome": 'iPhone X', "Preco":999.00, "Quantidade": 1, "Total": 999.00 }, { "Id": 200398, "Encontro": '2017-09-29 05:57', "Nome": 'Samsung S8 Black', "Preco": 756.00, "Quantidade": 1, "Total": 756.00 }], }; class TableDesktop{ constructor(_id, _arrData){ this.id = _id; this.arrData = _arrData; } set tableObject(_object){ this.table = _object; } get tableObject( ){ return this.table; } set theadObject(_object){ this.thead = _object; } get theadObject( ){ return this.thead; } set bodyObject(_object){ this.body = _object; } get bodyObject( ){ return this.body; } createTable(){ this.generateThead(); this.generateBody(); this.generateTable(); const TABLE_CONTAINER = document.getElementById('table-container'); if(TABLE_CONTAINER.childNodes.length === 1){ TABLE_CONTAINER.removeChild(TABLE_CONTAINER.childNodes[0]); TABLE_CONTAINER.appendChild(this.tableObject); } else{ TABLE_CONTAINER.appendChild(this.tableObject); } } generateTable(){ const TABLE = document.createElement('table'); TABLE.setAttribute('class', 'table table100-head'); TABLE.appendChild(this.theadObject); TABLE.appendChild(this.bodyObject); this.tableObject = TABLE; console.log(TABLE) } generateThead(){ const TR = document.createElement('tr'), THEAD = document.createElement('thead'); for(let coluna = 0; coluna < this.arrData.Informacoes.qtCols; coluna++){ const THEAD_VALUES = this.arrData.Informacoes.Cabecalho[coluna]; const TH = document.createElement('th'); TH.setAttribute('scope', 'col'); TH.appendChild(document.createTextNode(THEAD_VALUES)); TR.appendChild(TH); } THEAD.setAttribute('class', 'thead-dark'); THEAD.appendChild(TR); this.theadObject = THEAD; } generateBody(){ const BODY = document.createElement('tbody'); let tr; for(let linha = 0; linha < this.arrData.Informacoes.qtRows; linha++){ const BODY_VALUES = this.arrData.Produtos[linha]; tr = document.createElement('tr'); for(let coluna = 0; coluna < this.arrData.Informacoes.qtCols; coluna++){ const THEAD_VALUES = this.arrData.Informacoes.Cabecalho[coluna]; const TH = document.createElement('th'); const TD = document.createElement('td'); if(THEAD_VALUES === "Id"){ TH.setAttribute('scope', 'row'); TH.appendChild(document.createTextNode(BODY_VALUES.Id)); tr.appendChild(TH); } else { TD.appendChild(document.createTextNode(BODY_VALUES[this.arrData.Informacoes.Cabecalho[coluna]])); tr.appendChild(TD); } } BODY.appendChild(tr); } this.bodyObject = BODY; } } const TABLE_DESKTOP = new TableDesktop('container-table-desktop', DATA); TABLE_DESKTOP.createTable(); 

 table tbody tr td:nth-child(1):before { content: ""; } table tbody tr td:nth-child(2):before { content: ""; } table tbody tr td:nth-child(3):before { content: "Name"; } table tbody tr td:nth-child(4):before { content: "Price"; } table tbody tr td:nth-child(5):before { content: "Quantity"; } table tbody tr td:nth-child(6):before { content: "Total"; } 

 <div id="table-container"></div> 

The expected result is this: https://colorlib.com/etc/tb/Table_Responsive_v1/index.html

Answer 1

This is the relevant part of the code:

const STR = this.arrData.Informacoes.Cabecalho[coluna];
TD.appendChild(document.createTextNode(STR + ': ' +  BODY_VALUES[STR]));

 const DATA = { "Informacoes": { "qtRows": 3, "qtCols": 6, "Cabecalho": ["Id", "Encontro", "Nome", "Preco", "Quantidade", "Total"] }, "Produtos": [{ "Id": 200396, "Encontro": '2017-09-26 01:22', "Nome": 'Controlador do console de jogos', "Preco": 22.00, "Quantidade": 2, "Total": 44.00 }, { "Id": 200397, "Encontro": '2017-09-28 05:57', "Nome": 'iPhone X', "Preco": 999.00, "Quantidade": 1, "Total": 999.00 }, { "Id": 200398, "Encontro": '2017-09-29 05:57', "Nome": 'Samsung S8 Black', "Preco": 756.00, "Quantidade": 1, "Total": 756.00 }], }; class TableDesktop { constructor(_id, _arrData) { this.id = _id; this.arrData = _arrData; } set tableObject(_object) { this.table = _object; } get tableObject() { return this.table; } set theadObject(_object) { this.thead = _object; } get theadObject() { return this.thead; } set bodyObject(_object) { this.body = _object; } get bodyObject() { return this.body; } createTable() { this.generateThead(); this.generateBody(); this.generateTable(); const TABLE_CONTAINER = document.getElementById('table-container'); if (TABLE_CONTAINER.childNodes.length === 1) { TABLE_CONTAINER.removeChild(TABLE_CONTAINER.childNodes[0]); TABLE_CONTAINER.appendChild(this.tableObject); } else { TABLE_CONTAINER.appendChild(this.tableObject); } } generateTable() { const TABLE = document.createElement('table'); TABLE.setAttribute('class', 'table table100-head'); TABLE.appendChild(this.theadObject); TABLE.appendChild(this.bodyObject); this.tableObject = TABLE; } generateThead() { const TR = document.createElement('tr') , THEAD = document.createElement('thead'); for (let coluna = 0; coluna < this.arrData.Informacoes.qtCols; coluna++) { const THEAD_VALUES = this.arrData.Informacoes.Cabecalho[coluna]; const TH = document.createElement('th'); TH.setAttribute('scope', 'col'); TH.appendChild(document.createTextNode(THEAD_VALUES)); TR.appendChild(TH); } THEAD.setAttribute('class', 'thead-dark'); THEAD.appendChild(TR); this.theadObject = THEAD; } generateBody() { const BODY = document.createElement('tbody'); let tr; for (let linha = 0; linha < this.arrData.Informacoes.qtRows; linha++) { const BODY_VALUES = this.arrData.Produtos[linha]; tr = document.createElement('tr'); for (let coluna = 0; coluna < this.arrData.Informacoes.qtCols; coluna++) { const THEAD_VALUES = this.arrData.Informacoes.Cabecalho[coluna]; if (THEAD_VALUES === "Id") { const TH = document.createElement('th'); TH.setAttribute('scope', 'row'); TH.appendChild(document.createTextNode(BODY_VALUES.Id)); tr.appendChild(TH); } else { const TD = document.createElement('td'); const STR = this.arrData.Informacoes.Cabecalho[coluna]; TD.appendChild(document.createTextNode(STR + ': ' + BODY_VALUES[STR])); tr.appendChild(TD); } } BODY.appendChild(tr); } this.bodyObject = BODY; } } const TABLE_DESKTOP = new TableDesktop('container-table-desktop',DATA); TABLE_DESKTOP.createTable(); 

 /*table tbody tr td:nth-child(1):before { content: ""; } table tbody tr td:nth-child(2):before { content: ""; } table tbody tr td:nth-child(3):before { content: "Name"; } table tbody tr td:nth-child(4):before { content: "Price"; } table tbody tr td:nth-child(5):before { content: "Quantity"; } table tbody tr td:nth-child(6):before { content: "Total"; }*/ 

 <link rel="stylesheet" type="text/css" href="https://colorlib.com/etc/tb/Table_Responsive_v1/vendor/bootstrap/css/bootstrap.min.css"> <div id="table-container"></div>