Javascript obtient la valeur de texte d'une colonne à partir d'une ligne particulière d'un tableau html

Question

Un utilisateur clique sur une ligne d'une table et je souhaite obtenir (en Javascript) le innerhtml de la 3ème colonne de cette ligne.

Quelque chose comme :

document.getElementById("tblBlah").rows[i].columns[j].innerHTML

ne semble pas réalisable et je ne trouve rien ici ni sur le net.

Toute solution serait très appréciée (pas de jQuery)

Answer 1

document.getElementById("tblBlah").rows[i].columns[j].innerHTML;

Devrait être:

document.getElementById("tblBlah").rows[i].cells[j].innerHTML;

Mais j’ai l’impression nette que la ligne/cellule dont vous avez besoin est celle sur laquelle l’utilisateur a cliqué. Si tel est le cas, le moyen le plus simple d'y parvenir consiste à attacher un événement aux cellules de votre tableau:

function alertInnerHTML(e)
{
    e = e || window.event;//IE
    alert(this.innerHTML);
}

var theTbl = document.getElementById('tblBlah');
for(var i=0;i<theTbl.length;i++)
{
    for(var j=0;j<theTbl.rows[i].cells.length;j++)
    {
        theTbl.rows[i].cells[j].onclick = alertInnerHTML;
    }
}

Cela rend toutes les cellules de la table cliquables et en avertit innerHTML. L'objet événement sera transmis à la fonction alertInnerHTML, dans laquelle l'objet this sera une référence à la cellule sur laquelle l'utilisateur a cliqué. L'objet événement vous offre des tas d'astuces sur la manière dont vous voulez que l'événement click se comporte s'il existe, par exemple, un lien dans la cellule sur laquelle vous avez cliqué, mais je suggère de vérifier les MDN et MSDN (pour l'objet window.event)

Answer 2

au cas où votre table a tbody

let tbl = document.getElementById("tbl").getElementsByTagName('tbody')[0];
console.log(tbl.rows[0].cells[0].innerHTML)