How to go through td in the body?

Question

<table> <tbody id="SAMPLETBODY"> <tr> <td>TEST1</td> <td>TEST2</td> <td>TEST3</td> <td>TEST4</td> </tr> </tbody> </table> 

I have the code above, I want iteration through td, since iteration through tbodies in the table looks like this:

 var table1 = document.getElementById('firstTable'); for(int i = 0; i < table1.tBodies.length; i++) { /*DO SOMETHING HERE*/ } 

How can I do this in td inside tbodies?

EDIT:

I have several tables in the table, I already tried some similar codes (they were repeated through all tweets) and were posted here before I asked a question.

EDIT AGAIN:

final code:

 function sampleFunc() { var x = ""; var tds = document.querySelectorAll('#SAMPLETBODY td'), i; for(i = 0; i < tds.length; ++i) { x = x + tds[i].innerHTML; } return x; } 

thanks: rink.attendant.6

Answer 1

Use querySelectorAll() :

 var tds = document.querySelectorAll('tbody td'), i; for(i = 0; i < tds.length; ++i) { // do something here } 

If you want to restrict it to a specific table, for example, #firstTable , you will need to indicate that:

 var tds = document.querySelectorAll('#firstTable tbody td'); 

Just noticed that you have an id on tbody , so the selector will look like the one shown on your tbody :

 var tds = document.querySelectorAll('#SAMPLETBODY td'); 

Answer 2

provide an id for your table and use javascript to do this

 <table id="table_id" > <script> var e1 = document.getElementById('table_id'); for(int i = 0; i < e1.tBodies.length; i++) { } </script> </table> 

Answer 3

Using getElementsByTagName('td') or querySelectorAll is the most sensible approach, but since you already know about tbodies , you might be interested to know about rows and cells .

A tbody element has the rows property, which is a set of tr elements, i.e. the lines it contains (unsurprisingly, right?). Each tr element as a property of cells , which is a set of td elements (here, too, is not surprising).

So technically you could do

 for(var i = 0; i < table1.tBodies.length; i++) { var tbody = table1.tBodies[i]; for (var j = 0; j < tbody.rows.length; j++) { var row = tbody.rows[j]; for (var k = 0; k < row.cells.length; k++) { var cell = row.cells[k]; // ... } } } 

But such an enclosed loop cycle is difficult to read and maintain. Other answers show much better solutions.

You can find out about the tbody , tr and td properties in the MDN documentation.

Answer 4

You can use the humble getElementsByTagName ():

 var tbody = document.getElementById('SAMPLETBODY'), cells = tbody.getElementsByTagName('td'); for (var k = 0; k < cells.length; ++k) { // do stuff with cells[k]; } 

Answer 5

 var table1 = document.getElementById('firstTable'); 

Here it returns a table with id firstTable

Then, using this, we get all td in table1, for example

 var tds = table1.getElementsByTagName('td'); 

Now you can iterate over each td, for example

 for (i = 0; i < tds.length; i++) { console.log(tds[i]) } 

Jsfiddle

Answer 6

Try it.

 $("td", firstTable).each(function() {...} 

Only with javascript. Try this ... Edit:

  var table = document.getElementById('SAMPLETBODY'), cells = table.getElementsByTagName('td'); for (var k = 0; k < cells.length; ++k) { // do stuff with cells[k]; alert(cells[k].innerHTML); } 

Answer 7

You can use this, for example:

 var tbody = document.getElementsByTagName("tbody")[0]; var tds = tbody.getElementsByTagName("td"); for(var node in tds){ console.log(tds[node]) } 

There are different ways to do this, you can use document.getElementById (if you have a table or tbody with id), document.getElementsByClassName in case the table or tbody has a class name, etc.

Demo

Answer 8

try something like this

 var table1 = document.getElementById('SAMPLETBODY'); var tds = table1.getElementsByTagName("td"); for (var i = 0; i < tds.length; i++) { alert(tds[i].innerHTML); } 

Answer 9

Iterate over rows a cells arrays:

 var table1 = document.getElementById('firstTable'); for (var i = 0; i < table1.tBodies.length; i++) { var rows = table1.tBodies[i].rows; for (var j = 0; j < rows.length; j++) { var cells = rows[j].cells; for (var k = 0; k < cells.length; k++) { console.log(cells[k]); } } } 

http://jsfiddle.net/dfsq/6Xbre/