...

View Full Version : Onclick Table Cell Position



Uzair
11-10-2006, 09:22 AM
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!

Ancora
11-10-2006, 12:52 PM
<!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>

Mr J
11-10-2006, 01:53 PM
This example may help

www.huntingground.freeserve.co.uk/style/tutorials/pos_in_table.htm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum