Contare il numero di righe di una tabella con JavaScript

Molto spesso nei siti web abbiamo a che fare con tabelle di ogni genere, poiché consentono di elencare numerosi tipi di informazioni in un solo elemento e soprattutto sono facili da gestire per uno sviluppatore.

Con il linguaggio HTML si possono creare tabelle di ogni genere con poche righe di codice. Le tabelle sono composte da righe e celle, distinte da appositi tag HTML, rispettivamente tr e td (o th per celle di intestazione). In questo articolo ci concentreremo su come contare le righe (rows) di una tabella HTML con JavaScript, cioè fare in modo che il codice JavaScript ci restituisca il numero esatto di righe presenti in una specifica tabella.

Contare le righe di una tabella HTML con JavaScript

Con JavaScript è possibile manipolare e interrogare qualsiasi elemento HTML presente in una pagina web, tra cui anche le tabelle e le righe che la compongono.

Uno script JS può dunque facilmente contare il numero di tag <tr> presenti in una tabella <table> come quella descritta di seguito:

<table>
  <tr>
    <th>Nome</th>
    <th>Cognome</th>
    <th>Età</th>
  </tr>
  <tr>
    <td>Mario</td>
    <td>Rossi</td>
    <td>35</td>
  </tr>
  <tr>
    <td>Giovanni</td>
    <td>Bianchi</td>
    <td>42</td>
  </tr>
  <tr>
    <td>Paola</td>
    <td>Verdi</td>
    <td>27</td>
  </tr>
  <tr>
    <td>Claudia</td>
    <td>Brown</td>
    <td>52</td>
  </tr>
</table>

Ora, considerando la tabella HTML descritta, possiamo facilmente contare il numero di righe con JavaScript in questo modo:

<script>
   var table = document.getElementsByTagName("table");
   var tr = table[0].getElementsByTagName('tr');
   console.log(tr.length);
    // 5
</script>

Il nostro codice JavaScript restituirà precisamente il numero di righe presenti nella tabella HTML, compresa la riga di intestazione. Per escludere quest’ultima basterà sottrarre 1 al risultato ottenuto (tr.length - 1).

Per il conteggio facciamo uso del metodo getElementsByTagName, tuttavia è possibile usare un selettore di tipo id o altri metodi analoghi.

Extra – contare le celle di una tabella HTML

Oltre al conteggio delle righe di una tabella, è possibile anche programmare uno script per contare le singole celle presenti. Le celle sono dichiarate con il tag <td>, dunque per questo conteggio basterà fare come segue:

<script>
   var table = document.getElementsByTagName("table");
   var td = table[0].getElementsByTagName('td');
   console.log(td.length);
    // 12
</script>

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle