web-dev-qa-db-fra.com

Comment sélectionner <td> de la <table> avec javascript?

Je sais que c'est une question très facile, mais je n'ai trouvé la réponse nulle part. Seules les réponses sont celles utilisant jQuery, pas de JS pur. J'ai essayé le code ci-dessous et cela ne fonctionne pas. Je ne sais pas pourquoi.

var t = document.getElementById("table"),
    d = t.getElementsByTagName("tr"),
    r = d.getElementsByTagName("td");

Cela ne fonctionne pas non plus:

var t = document.getElementById("table"),
    d = t.getElementsByTagName("tr"),
    r = d.childNodes;

Qu'est-ce que je fais mal? Quelle est la meilleure façon de procéder?

EDIT: J'ai en effet l'id de ma table table. Preety idiot je sais. Voici à quoi ressemble mon HTML:

<table id="table">
            <tr>
                <td id="c1">1</td>
                <td id="c2">2</td>
                <td id="c3">3</td>
            </tr>
            <tr>
                <td id="b1">4</td>
                <td id="b2">5</td>
                <td id="b3">6</td>
            </tr>
            <tr>
                <td id="a1">7</td>
                <td id="a2">8</td>
                <td id="a3">9</td>
            </tr>
</table>

Pour expliquer plus clairement mes intentions> je souhaite faire un jeu de tic tac toe. Pour commencer, je souhaite cliquer sur le <td> et pouvoir extraire l'id de ce <td> particulier. Comment le faire le plus efficacement possible?

javascripthtml-tableparent-child
13
oFca

Cette d = t.getElementsByTagName("tr") et cette r = d.getElementsByTagName("td") sont toutes les deux arrays. Le getElementsByTagName renvoie une collection d'éléments même s'il n'y en a qu'un trouvé dans votre correspondance.

Vous devez donc utiliser comme ceci:

var t = document.getElementById("table"), // This have to be the ID of your table, not the tag
    d = t.getElementsByTagName("tr")[0],
    r = d.getElementsByTagName("td")[0];

Placez l'index du tableau comme vous souhaitez accéder aux objets.

Notez que getElementById comme son nom l'indique, obtenez simplement l'élément avec l'identifiant correspondant, donc votre table doit être comme <table id='table'> et getElementsByTagName obtient par la balise.

MODIFIER:

Eh bien, en poursuivant ce post, je pense que vous pouvez le faire:

var t = document.getElementById("table");
var trs = t.getElementsByTagName("tr");
var tds = null;

for (var i=0; i<trs.length; i++)
{
    tds = trs[i].getElementsByTagName("td");
    for (var n=0; n<trs.length;n++)
    {
        tds[n].onclick=function() { alert(this.id); }
    }
}

Essayez!

18
user898741

essayez document.querySelectorAll("#table td");

8
Nick Shvelidze
var t = document.getElementById("table"),
    d = t.getElementsByTagName("tr"),
    r = d.getElementsByTagName("td");

doit être:

var t = document.getElementById("table"),
    tableRows = t.getElementsByTagName("tr"),
    r = [], i, len, tds, j, jlen;

for ( i =0, len = tableRows.length; i<len; i++) {
    tds = tableRows[i].getElementsByTagName('td');
    for( j = 0, jlen = tds.length; j < jlen; j++) {
        r.Push(tds[j]);
    }
}

Parce que getElementsByTagName renvoie un NodeList une structure de type tableau. Vous devez donc parcourir les nœuds de retour, puis remplir r comme ci-dessus.

3
Joe

Il existe de nombreuses façons d’y parvenir, et ce n’est qu’une d’entre elles.

$("table").find("tbody td").eq(0).children().first()
1
Sameera Thilakasiri

Il commence à apparaître quelques réponses qui supposent que vous voulez obtenir tous les éléments <td> De #table. Si tel est le cas, la façon la plus simple de procéder entre plusieurs navigateurs est document.getElementById('table').getElementsByTagName('td'). Cela fonctionne car getElementsByTagName ne renvoie pas uniquement les enfants immédiats. Aucune boucle n'est nécessaire.

1
duri

Il existe également les membres rows et cells;

var t = document.getElementById("tbl");
for (var r = 0; r < t.rows.length; r++) {
    for (var c = 0; c < t.rows[r].cells.length; c++) {
        alert(t.rows[r].cells[c].innerHTML)
    }
}
0
Alex K.