Ajout d'un rang aux lignes d'une table HTML en utilisant la console JavaScript du navigateur

Publié le 12/10/2024 • Actualisé le 12/10/2024

Dans ce bout de code, nous voyons comment ajouter un rang aux lignes d'une table HTML en utilisant la console JavaScript du navigateur. Ouvrez votre console JavaScript et copiez / collez le snippet ci-dessous, et laissez la magie se produire. Veuillez noter que l'on peut aussi selectionner la table par sa classe ; dans ce cas utilisez getElementsByClassName() à la place de getElementsByTagName(), et dans les lignes en dessous, remplacez table. par table[0].

---

// Select the table class
const table = document.getElementById('myTable');

// Add the new colum name in the header
const head = table.getElementsByTagName('thead')[0].rows;
const newColumn = head[0].insertCell(0);
newColumn.innerHTML = "Rank";

// Finally, add the rank to each row
const rows = table.getElementsByTagName('tbody')[0].rows;
for (let i = 0; i < rows.length; i++) {
    const newCell = rows[i].insertCell(0);
    newCell.innerHTML = i + 1;
}

Name	Score
COil	10
Jmsche	8
Wouterj	5

---

 Plus sur Stackoverflow   Lire la doc  Snippet aléatoire

  Travaillez avec moi !

---