JS如何得知当前单元格是在第几行第几列

本人想编写一段代码，实现类似excel中的效果---当鼠标移至某个单元格时，该单元格边框变粗，同时该单元格所在行的第一个元素和该单元格所在列的第一个元素背景也发生改变。想请教下如何得知当前单元格是在该表格的第几行第几列？

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
td.over { background-color:#EEE; }
</style>
<script type="text/javascript">
window.onload = function() {
var td = document.getElementsByTagName('td');
for(var i = 0; i < td.length; i ++) {
td[i].onmouseout = function() {
for (var j = 0; j < td.length; j ++) td[j].className = '';
}
td[i].onmouseover = function() {
this.className = 'over';
this.parentNode.getElementsByTagName('td')[0].className = 'over'; //所在行的第一个单元格

document.getElementsByTagName('tr')[0].getElementsByTagName('td')[this.cellIndex].className = 'over';
//this.cellIndex返回当前单元在当前行中的索引号
}
}
}
</script>
</head><body>
<table width="400" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
参考资料：
http://www.w3school.com.cn/htmldom/dom_obj_tabledata.asp
http://www.w3school.com.cn/htmldom/dom_obj_tablerow.asp
$("table>tr").find("td").each(function(){
alert($(this).text());
});
or Javascript
for(var j=0;j<table.rows.length;j++){
for(var i=0;i<table.rows[j].cells.length;i++)
}
<script>
    function GetData(e) {
      src = e ? e.target : window.event.srcElement;
      if (!src.tagName) return;
      if (src.tagName != "TD") return;
      var c = src.cellIndex;
      var row = src.parentNode;
      while (row.tagName != "TR") row = row.parentNode;
      var r = row.rowIndex;
      alert("行：" + r + " 列：" + c);
    }
  </script><table width="400" border="1" onclick="GetData(event)">
看仔细，onmouseout()事件触发时已经去掉了所有单元格的样式。。