getElementById

drdexter33 · Feb 10, 2006

Say i have a table, and I get a reference to it like this:
--------------------------------------------------------
var table = document.getElementById('table');
--------------------------------------------------------

And then say I have a row and I get a reference to it like this:
--------------------------------------------------------
var rows = table.getElementsByTagName('tr');
--------------------------------------------------------

Why can't I loop through the rows object I found like this:
--------------------------------------------------------
for(var j=0; j<rows.length; j++)
{
var cells = rows[j].getElementById("cbCell");
}

--------------------------------------------------------
And get a reference to a cell called 'cbCell' which contains a checkbox, and read that checkbox state?

theniteowl · Feb 10, 2006

First you should not be using table or rows as variable names as they are reserved words and might cause you trouble.
And if you establish an array of table rows you can certainly loop through them but you are looping through the entire array continually re-assigning the value of cells with an object that may or may not exist in that table row. Essentially you ask every single TR in the array to return a reference to the object for cbCell and I assume it only exists in one of them. Even if the code worked unless the element was in the last TR in the array cells would be overwritten or you would just get an error on the first loop it did not find the value you were looking for.

Why do you need to drill down into the table to find it? You can give the checkbox an ID tag of it's own and access it directly without having to go through Table/tr/td/input.

Stamp out, eliminate and abolish redundancy!

theniteowl · Feb 10, 2006

Simple sample

Code:

<html>
<head>
<script type="text/javascript">
function mytest(which)
{
  if (document.getElementById(which).checked)
    alert('Checked');
  else
    alert('Not checked');
}
</script>
</head>
<body>
<table id="mytable" width="400" border="1">
  <tr>
    <td id="TD1">Check 1: <input type="checkbox" id="check1"></td>
  </tr>
  <tr>
    <td id="TD2">Check 2: <input type="checkbox" id="check2"></td>
  </tr>
</table>
<br>
<input type="button" value="Test 1" onclick="mytest('check1');">&nbsp;&nbsp;<input type="button" value="Test 2" onclick="mytest('check2');">
</body>
</html>

Stamp out, eliminate and abolish redundancy!

BillyRayPreachersSon · Feb 10, 2006

This should work just fine:

Code:

var table = document.getElementById('yourTableId');
var rows = table.rows;
for(var rowLoop=0; rowLoop<rows.length; rowLoop++) {
	var cells = rows[rowLoop].cells;
	for(var cellLoop=0; cellLoop<cells .length; cellLoop++) {
		alert('The content of cell ' + rowLoop + ', ' + cellLoop + ' is:\n\n' + cells[cellLoop].innerHTML);
	}
}

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Feb 10, 2006

Oh - if you want to read the contents of a checkbox in the cell, and assuming that the checkbox is the first input element in the cell (otherwise you'll need to change the index from 0), then change the alert for the following two lines, you should get what you're after:

Code:

var cb = cells[cellLoop].getElementsByTagName('input')[0];
alert('The checkbox in cell ' + rowLoop + ', ' + cellLoop + ' is ' + (cb.checked ? '' : 'not ') + 'checked');

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

drdexter33 · Feb 11, 2006

Thanks all!

Doug

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

getElementById

drdexter33

Programmer

theniteowl

Programmer

theniteowl

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

drdexter33

Programmer

Similar threads

Part and Inventory Search

Sponsor