How to select of the with javascript?

Asked Dec 14 '11 at 16:46

Active Sep 18 '22 at 16:15

Viewed 1.5e+01k times

22

I know this is very easy question, but I couldn't find the answer anywhere. Only answers are the ones using jQuery, not pure JS. I've tried the code below and it doesn't work. I don't know why.

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

This also doesn't work:

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

What am I doing wrong? What is the best way to do this?

EDIT: I indeed have the id of my table table. Preety silly I know. This is how my HTML looks:

`<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>`

To explain my intentions more clearly > I wish to make a tic tac toe game. For starters, I wish to click on the < td > and be able extract the id of that particular < td >. How to do it most efficiently?

javascript html-table parent-child

edited Nov 18 '17 at 12:03
Brian Tompsett - 汤莱恩

5,753

72

57

129

asked Dec 14 '11 at 16:46
oFca

2,830

6

31

43

The best way is to use a library, like jQuery – Nick Shvelidze Dec 14 '11 at 16:47

1

What do you mean by "doesn't work"? Do you really have a `

` element with "table" as its "id" attribute?
– Pointy Dec 14 '11 at 16:47

Question

I know this is very easy question, but I couldn't find the answer anywhere. Only answers are the ones using jQuery, not pure JS. I've tried the code below and it doesn't work. I don't know why.

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

This also doesn't work:

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

What am I doing wrong? What is the best way to do this?

EDIT: I indeed have the id of my table table. Preety silly I know. This is how my HTML looks:

<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>

To explain my intentions more clearly > I wish to make a tic tac toe game. For starters, I wish to click on the < td > and be able extract the id of that particular < td >. How to do it most efficiently?

The best way is to use a library, like jQuery – Nick Shvelidze Dec 14 '11 at 16:47 — Nick Shvelidze, Dec 14 '11 at 16:47

score 36 · Accepted Answer · edited Dec 27 '19 at 14:40

36

This d = t.getElementsByTagName("tr") and this r = d.getElementsByTagName("td") are both arrays. The getElementsByTagName returns an collection of elements even if there's just one found on your match.

So you have to use like this:

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];

Place the index of the array as you want to access the objects.

Note that getElementById as the name says just get the element with matched id, so your table have to be like <table id='table'> and getElementsByTagName gets by the tag.

EDIT:

Well, continuing this post, I think you can do this:

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<tds.length;n++)
    {
        tds[n].onclick=function() { alert(this.innerHTML); }
    }
}

Try it!

edited Dec 27 '19 at 14:40

Hernán Eche

6,529
12
51
76

answered Dec 14 '11 at 16:49

+1, but don't **fully** like this, because there can be more than one `tr` and more than one `td` – Joe Dec 14 '11 at 16:53
2

To be pedantic, they're not true arrays, but `NodeList`s. – BoltClock Dec 14 '11 at 16:54
@MikeStewart of course, this is for he learn how it works, then he apply a loop or whatever he needs. – Dec 14 '11 at 16:55
Thank you for clarifying that those are arrays, I didn't know that. I have now edited the question with a bit more specificity. Is the answer here more appropriate or should I make another question regarding the tic tac toe part? :) – oFca Dec 14 '11 at 17:47
@Márcio This is a stunning answer, exactly what I was looking for. I have a few questions regarding your solution because I would like to know the thought process behind it :) 1.Why did you use the for loops? 2. How come .onclick is triggered? It confuses me because .onclick is deep within the for loops. How does it know wich trd[n] I am clicking on? – oFca Dec 14 '11 at 23:09
@oFca 1.So you have one array with all `tr` objects of the table and you need to loop them to reach the all `td` on each `tr`, this is the first loop. So to each `tr` you'll have another array of objects(`tds = trs[i].getElementsByTagName("td");`) that carries the `td`s, it's the secund loop. So within the secund loop `i` corresponds to the index of the current `tr` and `n` the index of the current `td`, then `tds[n]` is your current `td`.2.When you set the `onclick` to it, browser will now handle the event for this object. The event's on 2º loop cause there you have the `td`. Hope it's clear. – Dec 15 '11 at 10:24
second loop should be tds.length not trs.length – FlavorScape Jun 03 '15 at 21:56
Don't use this solution, just use a query selector for this and loop on the result. Like @Joe told before: you can have more tr than td or more td than tr. – Feb 13 '19 at 16:16
They are not arrays. They are HTMLCollections. You can iterate through them like arrays and they have indexes but you can't use Array methods, you would need to convert them first. – Eduard.T Oct 06 '20 at 01:35

score 20 · Answer 2 · answered Dec 14 '11 at 16:49

20

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

answered Dec 14 '11 at 16:49

Nick Shvelidze

1,564
1
14
28

3

This is by far the best solution. Use this answer then loop on result. – Feb 13 '19 at 16:17

score 3 · Answer 3 · answered Dec 14 '11 at 16:49

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

needs to be:

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]);
    }
}

Because getElementsByTagName returns a NodeList an Array-like structure. So you need to loop through the return nodes and then populate you r like above.

score 2 · Answer 4 · answered Dec 14 '11 at 16:49

2

There are a lot of ways to accomplish this, and this is but one of them.

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

answered Dec 14 '11 at 16:49

Sameera Thilakasiri

9,452
10
51
86

score 2 · Answer 5 · answered Dec 14 '11 at 16:53

There begin to appear some answers that assume you want to get all <td> elements from #table. If so, the simplest cross-browser way how to do this is document.getElementById('table').getElementsByTagName('td'). This works because getElementsByTagName doesn't return only immediate children. No loops are needed.

score 2 · Answer 6 · edited Dec 10 '17 at 11:54

2

There are also the rows and cells members;

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)
    }
}

edited Dec 10 '17 at 11:54

Innovator Always

3
2

answered Dec 14 '11 at 16:55

Alex K.

171,639
30
264
288

This was the first thing that actually worked, thanks. I did "t.rows[r].cells[c].parentElement.style.display = "none";" and it referensed the parent object. – Michael Larsson Aug 24 '21 at 17:57

score 0 · Answer 7 · answered Jun 20 '22 at 08:35

You can select your table using the ID you defined and then select all child elements with the tag tr or td as you wish.

let myTable = document.querySelector("#table");
let allTds = myTable.querySelectorAll("td");
let allTrs = myTable.querySelectorAll("tr");

Then you can do what every you want with it. There is a list of functions you can apply to them here: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/entries

for example iterate through them and log the content like this:

for (item of allTds.values()){
    console.log(item.textContent);
}

l30.4l3x · Answer 8 · 2022-09-18T16:15:47.637

You can use the Array.from ES6 feature that converts array-like structures (like HTMLCollection) into vanilla arrays and iterate through them your way.

const values = Array.from(document.querySelectorAll('#table tr td'))
              .map(td => td.innerHTML);

console.log(values) // [1, 2, 3 ... 9]

<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>

8 Answers8

Linked

Related