How to style insertCell ()?

Question

I wanted to understand, how can I put styles in these table rows, they are generated by the insert cell, so there is no way I can define a css for them, how can I leave a style fixed for it to be generated, such as a larger font size ?

window.onload = function() {
  fetch('http://localhost:3000/teste')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      var table = document.getElementById('table');

      // Primeiro define a variavel, e coloca o comando para inserir uma linha
      for (var i = 0; i < 8; i++) {
        var row = table.insertRow(i + 1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        var cell8 = row.insertCell(7);
        var cell9 = row.insertCell(8);
        var cell10 = row.insertCell(9);

        // Aqui chama a variavel e coloca a linha na tabela
        cell1.innerHTML = data[i][0];
        cell2.innerHTML = data[i][1];
        cell3.innerHTML = data[i][2];
        cell4.innerHTML = data[i][3];
        cell5.innerHTML = data[i][4];
        cell6.innerHTML = data[i][5];
        cell7.innerHTML = data[i][6];
        cell8.innerHTML = data[i][7];
        cell9.innerHTML = data[i][8];
        cell10.innerHTML = data[i][9];
      }
    })
}

<table id="table" style="border: 1.5px solid rgb(117, 117, 117);">
  <tr style="background-color: rgb(0, 101, 44); font-size: 37px; font-family: Tahoma, Verdana, Segoe, sans-serif; border-bottom: 2px solid rgb(0, 247, 255); color: white;">
    <th style="width: 11%;border: 1.5px solid rgb(117, 117, 117);">Data</th>
    <th style="width: 8%; border: 1.5px solid rgb(117, 117, 117);">Hora</th>
    <th style="width: 5%;border: 1.5px solid rgb(117, 117, 117);">Orig.</th>
    <th style="width: 8%;border: 1.5px solid rgb(117, 117, 117);">O.P.</th>
    <th style="width: 10%;border: 1.5px solid rgb(117, 117, 117);">Produto</th>
    <th style="width: 8%;border: 1.5px solid rgb(117, 117, 117);">Deriv.</th>
    <th style="width: 9%;border: 1.5px solid rgb(117, 117, 117);">Peso (TN)</th>
    <th style="width: 7%;border: 1.5px solid rgb(117, 117, 117);">Refugo (TN)</th>
    <th style="width: 13%;border: 1.5px solid rgb(117, 117, 117);">Lote</th>
    <th style="width: 60%;;border: 1.5px solid rgb(117, 117, 117);">Operador</th>


  </tr>
</table>

Use a stylesheet please! Do not have inline CSS unless really no other way. Also the widths are given by the table header cells — mplungjan, Jan 11 '23 at 12:45
Ideally, use a style sheet. But if you need to use inline styles, `insertCell` returns the DOM element, which has a [`style` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style). — T.J. Crowder, Jan 11 '23 at 12:46
Sorry I don't use stylesheet, this is just a prototype to test styles, I created a Styles.css file where they are all saved there. I just wanted to know if there is a possibility to edit these insertCell, it is my biggest doubt — Jean Zacarchuka, Jan 11 '23 at 12:48
How would I apply this style property in my code? Can you explain to me please — Jean Zacarchuka, Jan 11 '23 at 12:53

mplungjan · Answer 1 · 2023-01-11T13:12:30.933

I strongly suggest you use a CSS stylesheet for this

You can set the widths with colgroup and you need a thead an tbody tag

I then use template literals to map the rows and cells. I have guessed the data structure . If it is incorrect, post an example and I will correct my code

const process = data => {
  var table = document.querySelector('#table tbody');
  table.innerHTML = data
    .map(arr => `<tr>${arr
      .map(text => `<td>${text}</td>`)
      .join('')}</tr>`)
    .join('');
};
window.addEventListener('DOMContentLoaded', () => { // when page loads
  // fetch('http://localhost:3000/teste')   // remove the comments here
  //  .then(response => response.json())
  //  .then(data => process(data))
  process(data); // delete this and the test data on your page
})

#table th tr td {
  border: 1.5px solid rgb(117, 117, 117);
}

#table thead tr {
  background-color: rgb(0, 101, 44);
  font-size: 37px;
  font-family: Tahoma, Verdana, Segoe, sans-serif;
  border-bottom: 2px solid rgb(0, 247, 255);
  color: white;
}

<table id="table">
  <colgroup>
    <col style="width: 11%" />
    <col style="width: 8%" />
    <col style="width: 5%" />
    <col style="width: 8%" />
    <col style="width: 10%" />
    <col style="width: 8%" />
    <col style="width: 9%" />
    <col style="width: 7%" />
    <col style="width: 13%" />
    <col style="width: 60%" />
  </colgroup>
  <thead>
    <tr>
      <th>Data</th>
      <th>Hora</th>
      <th>Orig.</th>
      <th>O.P.</th>
      <th>Produto</th>
      <th>Deriv.</th>
      <th>Peso (TN)</th>
      <th>Refugo (TN)</th>
      <th>Lote</th>
      <th>Operador</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<script>
  // test data
  const data = [
    ["Data1", "Hora", "Orig.", "O.P.", "Produto", "Deriv.", "Peso (TN)", "Refugo (TN)", "Lote", "Operador"],
    ["Data2", "Hora", "Orig.", "O.P.", "Produto", "Deriv.", "Peso (TN)", "Refugo (TN)", "Lote", "Operador"],
    ["Data3", "Hora", "Orig.", "O.P.", "Produto", "Deriv.", "Peso (TN)", "Refugo (TN)", "Lote", "Operador"]
  ]
</script>

To use the stylesheet in your page, save the text in the CSS part of the snippet in a file with extension css.

If you call it table.css and store it in the same folder as the html page, then you need

<link rel="stylesheet" href="table.css" />

in the head of your page

How to style insertCell ()?

1 Answers1