How do you access rows and columns of a HTML table?

[anonieko]

This example applies to javascript, table, cells, rows

How do you access rows and columns of a HTML table?

<script language="javascript">
alert('start');
var tabl = document.getElementById('ordersTable');
alert( tabl.rows.length);
var l = tabl.rows.length;
var i = 0;
var s = "";
for (i = 0; i < l; i++ )
{
var tr = tabl.rows(i);
alert(tr);
alert(tr.cells(0));
var cll = tr.cells(0);
alert(cll.innerText);
s = s + "|" + cll.innerText;
}
alert("result=" + s);
</script>

 

[RobG]

This example applies to javascript, table, cells, rows

It is poorly written. Please indent using two or four spaces, it makes
quoted posts much better to read.

<script language="javascript">

The language attribute is depreciated, type is required.

alert('start');
var tabl = document.getElementById('ordersTable');

If the intention is to support older browsers, a document.all
alternative should also be provided - see the group FAQ:

alert( tabl.rows.length);
var l = tabl.rows.length;

Why get the length twice? And why not let the user know what the
alert is for? A better way would be:

var l = tabl.rows.length;
alert( 'Number of table rows: ' + l );

var i = 0;

i is given a value here and then again in the for statement. Why do it
twice? Better to delete the above declaration and put it in the for
statement.

var s = "";
for (i = 0; i < l; i++ )

for ( var i = 0; i < l; i++ )

{
var tr = tabl.rows(i);

The proper syntax for collections is to use square brackets - round
brackets are an IE-ism.

var tr = tabl.rows;

alert(tr);

alert( 'Found ' + tr.nodeName + ' ' + i );

alert(tr.cells(0));
var cll = tr.cells(0);

Two calls are made to the cell where one would do.

Not all browsers support accessing table cells through the cells
collection (Safari is one). It is likely better to use the childNodes
collection:

var cll = tr.childNodes[0];
alert( 'Found a ' + cll.nodeName );

This loop will only get the first cell in each row. Is that the
intention? The subject indicates access to the columns, not just the
first column.

alert(cll.innerText);

Again, two calls to the element when one would do.

innerText is supported by IE and very few other browsers. innerHTML
and a regular expression to strip out HTML tags would do a better job
(though innerHTML is not a standard). DOM 3's 'Node.textContent' will
provide a standards-compliant method of extracting the text within a
node that is similar to innerText, however DOM 3 is not yet widely
supported:

<URL:http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent>

var ct = cll.innerHTML.replace( /<[^<>]+>/g, '' );
alert( cll.nodeName + ' contains text ' + ct );

s = s + "|" + cll.innerText;

Why not:

s += "|" + cll.innerText;

}
alert("result=" + s);
</script>

Here's the full script:


<table id="ordersTable">
<tr><td> cell <b>0</b> </td><td> another cell </td></tr>
<tr><td> cell <b>1</b> </td><td> another cell </td></tr>
<tr><td> cell <b>2</b> </td><td> another cell </td></tr>
</table>


<script type="text/javascript">

alert('Starting...');
var tabl = document.getElementById('ordersTable');
var l = tabl.rows.length;
alert( 'Number of table rows: ' + l );
var s = '';
for ( var i = 0; i < l; i++ )
{
var tr = tabl.rows;
alert( 'Found ' + tr.nodeName + ' ' + i );
var cll = tr.childNodes[0];
alert( 'Found a ' + cll.nodeName );
var ct = cll.innerHTML.replace( /<[^<>]+>/g, '' );
alert( cll.nodeName + ' contains text: ' + ct );
s += '|' + cll.innerText;
}
alert('result:\n' + s);

</script>