How To Access Table Cells Using x and y Coordinates Through DHTML (264470)

SUMMARY

The following sample uses the elementFromPoint method to return the cell element's specific x and y coordinates. The sample then uses the cellIndex and rowIndex properties to retrieve the cell's position in the cells collection and rows collection, respectively.

MORE INFORMATION

<HTML>
<HEAD>
<SCRIPT Language="JavaScript">

function getCellInfo(oObject)
{
  	if ( oObject == null )
      	   return;

   	var objCell = document.elementFromPoint( window.event.x, window.event.y );

        if ( objCell.tagName != "TD" )
	   return;

  	intCellIndex = objCell.cellIndex;
   	intRowIndex = objCell.parentElement.rowIndex;

	text1.value = intRowIndex + ", " + intCellIndex;
	text2.value = objCell.innerHTML;
}
</SCRIPT>
</HEAD>

<BODY onclick="getCellInfo(this)">
	<TABLE BORDER=1 WIDTH=40% ID="MyTable" COLS=2">
		<THEAD>
		<TR>
			<TH>Heading 1</TH>
			<TH>Heading 2</TH>
		</TR>
		<TBODY>
		<TR>
			<TD>Row 1, Column 1</TD>
			<TD>Row 1, Column 2</TD>
		</TR>
		<TR>
			<TD>Row 2, Column 1</TD>
			<TD>Row 2, Column 2</TD>
		</TR>
	</TABLE>
<BR>
Current row and column: <INPUT TYPE="text" ID="text1" VALUE="">
<BR>
Current text: <INPUT TYPE="text" ID="text2" VALUE="">
</BODY>
</HTML>

How To Access Table Cells Using x and y Coordinates Through DHTML (264470)

SUMMARY

MORE INFORMATION

REFERENCES