Referencing Tables

You can reference tables within a document by using the document.tables array

document.getElementsByTagName("table").length

Get number of tables

and also use the row and/or cell array to reference a specific row or cell.

document.getElementsByTagName('table')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0]

Reference the 1st cell in row 1

Table 1
Row 0 Cell 0
or
Table Cell 0		 Row 0 Cell 1
or
Table Cell 1
Row 1 Cell 0
or
Table Cell 2		 Row 1 Cell 1
or
Table Cell 3
Row 2 Cell 0
or
Table Cell 4

Note that Javascript counts from zero.

The last example referenced a cell by its ordinal number within the table row, the following example references a cell by its ordinal number within the table, cells are counted left to right, top to bottom.

document.getElementsByTagName('table')[0].getElementsByTagName('td')[3]

Reference cell 3

A more direct method would be to give a table an ID

document.getElementById("tableID")
document.getElementById("tableID").getElementsByTagName("tr")[n]
document.getElementById("tableID").getElementsByTagName("tr")[n].getElementsByTagName("td")[n]
document.getElementById("tableID").getElementsByTagName("td")[n]

Table 2
Row 1 Cell 1Row 1 Cell2
Row 2 Cell 3Row 2 Cell 4
Row 3 Cell 5Row 3 Cell 6

Using document.getElementById("tableID").getElementsByTagName("tr").length shows the number of rows in table 2.

Number of rows

Using document.getElementById("tableID").getElementsByTagName("td").length shows the number of cells in table 2.

Number of cells

Table Row 1 Row 1 Cell 1 Cell 3

The following example shows how to retrieve a variety of information from a table using inline statements and with a script.
Click in any table cell.

? 1 ? ? 2 ? ? 3 ?
? 4 ? ? 5 ? ? 6 ?
? 7 ? ? 8 ? ? 9 ?

These three lines will show
the results returned from
the script
This line will show which inline statement is used and its result


<script type="text/javascript">
<!--
moz=document.getElementById&&!document.all

function tableTest(e,cellinfo){
eventSource=(moz?e.target:event.srcElement)

tableRow=eventSource.parentNode.rowIndex
tableCell=eventSource.cellIndex

cellCount=eventSource.cellIndex

for(var i=0;i<tableRow;i++){
cellCount+=eventSource.offsetParent.rows[i].cells.length
}

alert(cellinfo+"\n\nRow Number = "+(tableRow+1)+"\n\nRow Cell Number = "+(tableCell+1)+"\n\nTable Cell Number = "+(cellCount+1) )
}
//-->
</script>

<table border="1" height="150" bordercolor="black" style="cursor:hand;cursor:pointer">
<tbody>
<tr align="center" valign="center">
<td width="50" onclick="tableTest(event,'this.offsetParent.nodeName = '+this.offsetParent.nodeName)">?</td>
<td width="50" onclick="tableTest(event,'this.offsetParent.rows.length = '+this.offsetParent.rows.length)">?</td>
<td width="50" onclick="tableTest(event,'this.offsetParent.cells.length = '+this.offsetParent.cells.length)">?</td>
</tr>
<tr align="center" valign="center">
<td onclick="tableTest(event,'this.parentNode.parentNode.nodeName = '+this.parentNode.parentNode.nodeName)">?</td>
<td onclick="tableTest(event,'this.parentNode.nodeName = '+this.parentNode.nodeName)">?</td>
<td onclick="tableTest(event,'this.parentNode.rowIndex = '+this.parentNode.rowIndex)">?</td>
</tr>
<tr align="center" valign="center">
<td onclick="tableTest(event,'this.parentNode.cells.length = '+this.parentNode.cells.length)">?</td>
<td onclick="tableTest(event,'this.cellIndex = '+this.cellIndex)">?</td>
<td onclick="tableTest(event,'this.offsetParent.cellIndex = '+this.offsetParent.cellIndex)">?</td>
</tr>
</tbody>
</table>

The following example
uses an irregular table
 
 

? ?
? ? ?
? ?



jeff