Как вставить: nth-child (x) и: before в сводную таблицу, используя javascript?

Question

Проблема со всем заключается в том, что данные из таблицы поступают из базы данных через API, поэтому таблица создается динамически, и поэтому я не могу использовать CSS для этого, помня, что приведенный ниже код помечает данные изтаблица в массиве ..

Я хотел бы преобразовать этот CSS ниже в Javascript, потому что моя таблица динамическая и не имеет возможности узнать количество tr и 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>

Ожидаемый результат: https://colorlib.com/etc/tb/Table_Responsive_v1/index.html

Answer 1

Это соответствующая часть кода:

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>