Microsoft KB Archive Search

Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

  1. Home
  2. How To Access Table Cells Using x and y Coordinates Through DHTML

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

View products that this article applies to.

This article was previously published under Q264470

↑ Back to the top

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.

↑ Back to the top

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>

↑ Back to the top

Keywords: KB264470, kbhowto

↑ Back to the top

Article Info
Article ID : 264470
Revision : 3
Created on : 6/29/2004
Published on : 6/29/2004
Exists online : False
Views : 464