Update data from a DOM table dynamically-CodePudding

I'm developing an API, it's been a while and I'm answering several questions here, I really appreciate the community for the help The doubt I have today is in relation to updates, my table is connected to an oracle database, and who is moving all this connection is nodejs, the table is generated by DOM, it's working fine, but now comes the doubt. Is there a way to update her data dynamically? I say with each new data that enters it updates and leaves the most recent on the screen

I programmed a timer to keep refreshing the page, it's the only way it updates, but I wanted to try to make it dynamic, to stay visually prettier.

What tool would I use to do this?

This is the one, it only updates the data if I refresh the entire page.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Apontamentos da Produção</title>
  <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

</head>

<body>
  <meta http-equiv="refresh" content="5">

  <div id="data"></div>

  <div >
    <div >
      <div > PAINEL-1 | APONTAMENTOS DA PRODUÇÃO</div>
      <div ></div>
    </div>
  </div>

  <br>

  <!-- Table to list data  -->
  <table id="table" >
    <tr >
      <th  style="width: 11%;">Data</th>
      <th  style="width: 8%; ">Hora</th>
      <th  style="width: 5%;">Orig.</th>
      <th  style="width: 8%;">O.P.</th>
      <th  style="width: 10%;">Produto</th>
      <th  style="width: 8%;">Deriv.</th>
      <th  style="width: 9%;">Peso (TN)</th>
      <th  style="width: 7%;">Refugo (TN)</th>
      <th  style="width: 13%;">Lote</th>
      <th  style="width: 60%;;">Operador</th>
    </tr>
  </table>

</body>

<script>

  // Here is where the push of information is done, called by localhost and positioning the ID of the table that it will take the information
  window.onload = function () {
    fetch('http://localhost:3000/teste')
      .then(response => response.json())
      .then(data => {
        console.log(data);
        var table = document.getElementById('table');

        // First define the variable, and put the command to insert a line, everything is organized by rows
        for (var i = 0; i < 7; 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);

          // Here it calls the variable and places the row in the table
          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];

        }
        })
          }

</script>

</html>

CodePudding user response：

You can indeed refresh the table using pure JS, using an approach similar to what you're already doing.

Based on your current code variable names, you can take it a few steps further by accessing the rows () and cells () programmatically;

aSpecificTr = table.rows[5];
aSpecificTd = aSpecificTr.cells[3];

Now you can imagine approaches that replace just the content of a specific row, or the content within a cell, even the styling of those elements depending on content (adding color, etc)

In this way you can avoid named variables like var cell1, cell2 and iterate through arrays.

for(let r=0; r<table.rows.length; r  ){
 let thisRow = table.rows[r];
 for(let c=0; c<thisRow.cells.length; c  ){
  let thisCell = thisRow.cells[c];
 }
}

Consider making use of HTML classes. And if your data from the server includes per-row unique identifiers consider integrating that as well.

<tr class='UniqueId-15'>
 <td class='Field-Data'>2023-01-16</td>
 <td class='Field-Hora'>16:15</td>
</tr>

Also consider using jQuery which could access cells fluently: $('.UniqueId-15 .Field-Hora').html('17:00')

React is alternative you might consider as well, but IMHO your fetch approach pure JS / jQuery will give you all the power you need to achieve anything you want.