Table not overlapping values

Asked

Viewed 30 times

1

I’m getting data from the firebase database and filling in a table dynamically. When new information arrives the table does not overwrite the data, it repeats the lines and puts the new data below without deleting the previous ones. Example: inserir a descrição da imagem aqui

Html code:

<table class="table" >
  <thead>
    <tr>
      <th>Id</th>
      <th>Nível de Urgência</th>
      <th>Tipo de serviço</th>
      <th>Mensagem</th>
      <th>Status</th>
    </tr>
  </thead>

  <tbody id="tabelaOcorrencias">

  </tbody>

</table>

Javascript code:

window.onload = function() {
    inicializa();
}

function inicializa() {
    database.ref('ocorrencias').on('value', function(snapshot) {
        snapshot.forEach(function(item) {
          item.forEach(function(cont) {
            InsertDataTable(cont.val(), cont.key, item.key);
          })
        })
      });
}

function InsertDataTable(fila, idOcorrencia, idUsuario) {
   var tbodyTable = document.getElementById('tabelaOcorrencias');
   var tbody = tbodyTable.insertRow(fila.length);

   tbody.innerHTML = '';
   tbody.innerHTML += `
     <td>${idOcorrencia}</td><td>${fila.nivelUrgencia}</td>
     <td>${fila.tipoServiço}</td><td>${fila.mensagem}</td>
     <td>${fila.status}</td>
     <button type="submit" onclick="alterarOcorrencia('${idOcorrencia}', 
     '${idUsuario}')" class="btn btn-danger">Atender</button>
    `

}

How do I delete before inserting?

  • Depends, how you call the function InsertDataTable?

  • I edited the code

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.