Come inserire dati nei tbody di una table in modo dinamico

Può capitare di dover inserire dinamicamente dei dati in una tabella di una pagina che contiene più tabelle, ognuna con il proprio <tbody>, utilizzando JavaScript.
In questi casi, se non si identifica correttamente la tabella di destinazione, si rischia di inserire i dati nel primo <tbody> trovato nel documento, causando errori o comportamenti indesiderati.

Come si può quindi garantire che i dati vengano inseriti nel <tbody> corretto?

Usando ad esempio questo codice dove sono presenti due o più tbody non potrai inserire i dati nel secondo o terzo tbody ma solo nel primo che incontrerà nella pagina html:

//***TABELLA 1********************************************************
<table>   
  <thead>
    <tr>
      <th scope="col">Articoli</th>
      <th scope="col">Spese</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ciambelle</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Cancelleria</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totale</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

//--***TABELLA 2*****************************************
<table>   
  <thead>
    <tr>
      <th scope="col">Articoli</th>
      <th scope="col">Spese</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Pane</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Benzina</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totale</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

const tableBody = document.querySelector("tbody");

const newRow = <tr>
               <td></td> 
               <td>${resData[0]}</td> 
               <td>${resData[1]}</td> 
               <td>${resData[2]}</td> 
               <td></td> 
               </tr> ; 

tableBody.insertAdjacentHTML('beforeend', newRow);

Se non puoi assegnare nessuna classe o ID ai tuoi `<tbody>`, ma desideri selezionare il secondo `<tbody>` presente nella pagina, puoi utilizzare un selettore specifico basato sulla posizione dell'elemento nel DOM.
Per ottenere il secondo `<tbody>`, puoi usare il metodo `querySelectorAll` insieme all'indice corretto (poiché gli indici negli array JavaScript sono basati su zero).

Ecco come puoi farlo:

Modifica del codice javascript precendente:


// Seleziona tutti i tbody presenti nella pagina
const tableBodies = document.querySelectorAll("tbody");

// Seleziona il secondo tbody (indice 1)
const secondTableBody = tableBodies[1];

// Aggiungi la nuova riga al secondo tbody
const newRow = `
    <tr>
        <td></td>
        <td>${resData[0]}</td>
        <td>${resData[1]}</td>
        <td>${resData[2]}</td>
        <td></td>
        <td></td>
        <td></td>
    </tr> `;

// Inserisci la nuova riga nel secondo tbody
secondTableBody.insertAdjacentHTML('beforeend', newRow);
```

Cosa è stato modificato?

1. **`querySelectorAll("tbody")`**: Recupera tutti gli elementi `<tbody>` presenti nella pagina e restituisce una `NodeList` (una sorta di array) contenente tutti i `<tbody>`.
2. **`tableBodies[1]`**: Seleziona il secondo `<tbody>`. Ricorda che in JavaScript gli indici partono da 0, quindi `tableBodies[1]` si riferisce al secondo `<tbody>` (il primo è `tableBodies[0]`).
3. **`insertAdjacentHTML('beforeend', newRow)`**: Aggiunge il contenuto HTML (in questo caso, la nuova riga) come ultimo figlio del secondo `<tbody>`.

In questo modo, la nuova riga verrà inserita sempre nel secondo `<tbody>`, senza bisogno di usare classi o ID.

Javascript

Tabelle

Lascia un commento