Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post

    Onclick Table Cell Position

    I want when I click on any of the Tabel Cell, it show me the cell info like...
    Top & Left cell position, Celll number(in which table row the cell exists) etc...
    Someone please help & guide me how can I do this. Any live example would b appriciated!
    Thanks!

  • #2
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> Table Coords </title>
    <script type="text/javascript">
    
    	var rowIndex = 0;
    	var cellIndex = 0;
    	var nTable = "";
    	var nRows = 0;
    	var nCells = 0;
    
    	function showCoords(r,c){
    
    		rowIndex = r;
    		cellIndex = c;
    		alert('Row '+rowIndex + '\nCell '+cellIndex);
    	}
    
    	function getCoords(currCell){
    
    		for (i=0; i<nRows; i++)
    			{
    			 for (n=0; n<nCells; n++)
    				{
    				 if (nTable.rows[i].cells[n] == currCell)
    					{
    					 showCoords(i,n);
    					}
    				}
    			}
    	}
    
    	function mapTable(){
    
    		nTable = document.getElementById('dataTable');
    		nRows = nTable.rows.length;
    		nCells = nTable.rows[0].cells.length;
    		for (i=0; i<nRows; i++)
    			{
    			 for (n=0; n<nCells; n++)
    				{
    				 nTable.rows[i].cells[n].onclick = function()
    					{
    					 getCoords(this);				 	
    					}
    				 nTable.rows[i].cells[n].onmouseover = function()
    					{
    					 this.style.cursor = 'pointer';			 	
    					}
    				}
    			}
    	}
    
    	onload=mapTable;
    
    </script>
    </head>
       <body>
          <table id='dataTable' align='center' width='250' border='1'>
             <tbody>
    
                <tr>
                   <td>
                      Data
                   </td>
                   <td>
                      Data
                   </td>
                   <td>
                      Data
                   </td>
    
                </tr>
                <tr>
                   <td>
                      Data
                   </td>
                   <td>
                      Data
                   </td>
                   <td>
                      Data
                   </td>
    
                </tr>
                <tr>
                   <td>
                      Data
                   </td>
                   <td>
                      Data
                   </td>
                   <td>
                      Data
                   </td>
    
                </tr>
             </tbody>
          </table>
       </body>
    </html>

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •