Compter le nombre de ligne d'un tableau avec JavaScript

Programmation JavaScript
, , , , , , ,
1

Bonjour,

Comment je peux compter avec JavaScript le nombre de lignes d’un tableau HTML ayant un id ?

Par exemple:

<table id="mytable">
    <thead>
        <tr><th>Header</th></tr>
    </thead>
    <tbody>
        <tr><td>Ligne 1</td></tr>
        <tr><td>Ligne 2</td></tr>
        <tr><td>Ligne 3</td></tr>
    </tbody>
    <tfoot>
        <tr><td>Footer</td></tr>
    </tfoot>
</table>
2

Récupérer l’id du table avec:

var table = document.getElementById("mytable");

il y a deux façons de compter le nombre de lignes d’un tableau HTML :

var total = table.rows.length; // 5  (avec Header et Footer)
var total = table.tBodies[0].rows.length; // 3   (sans Header et Footer)
3

Vous pouvez utiliser la propriété .rows et vérifier sa longueur avec .length, comme ceci :

var rows = document.getElementById('mytable').rows.length;
4

Si vous utilisez la bibliothéque jQuery, essayer la ligne de code suivant:

$('#mytable').find('tr').length

Ou tout simplement:

$('#mytable tr').length

Ou encore mieux

$('#mytable tbody tr').length
5

Il y’a pas mal de méthodes pour compter le nombre de ligne d’un tableau html avec JavaScript.

Méthode 1:

Si la table a un ID :

<table id="tableID">

var table = document.getElementById(tableID);
var rows = table[1].childElementCount;

Méthode 2:

Si la table a une class :

<table class="tableClass">

var table = document.getElementsByClassName(tableClass);
var rows = table[1].childElementCount;

Méthode 3:

Si la table a l’attribut name :

<table name="tableName">

var table = document.getElementsByTagName('tableName');
var rows = table[1].childElementCount;