How to select <td> from <table> using javascript?

Question

I know this is a very simple question, but I could not find the answer anywhere. Only the answers are using jQuery, not pure JS. I tried the code below and it does not work. I do not know why.

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

This also does not 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 really have a table id. I know a stupid hunch. This is what my HTML looks like:

 <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 more clearly explain my intentions> I want to make a game with a tick such. To start, I want to click on <td> and will be able to extract the identifier of this particular <td>. How to do this most effectively?

Answer 1

This d = t.getElementsByTagName("tr") and this r = d.getElementsByTagName("td") are arrays . getElementsByTagName returns a collection of elements, even if only one is found in your match.

So you should 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 the way you want to access the objects.

Note that getElementById as the name implies, just gets the element with a matching identifier, so your table should look like <table id='table'> and getElementsByTagName gets by 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<trs.length;n++) { tds[n].onclick=function() { alert(this.id); } } } 

Try!

Answer 2

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

Answer 3

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

should 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 structure similar to Array. So, you need to go through the return nodes, and then fill you r , as indicated above.

Answer 4

There are many ways to do this, and this is just one of them.

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

Answer 5

Some answers appear suggesting that you want to get all the <td> elements from #table . If so, the easiest way to cross-browser how to do this is document.getElementById('table').getElementsByTagName('td') . This works because getElementsByTagName does not return only immediate children. No need for cycles.

Answer 6

There are also members of rows and 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) } }