获取table中的rowIndex和cellIndex

时间:2020-05-11 人气:0

在IECN里有朋友问起怎么获取表格中某个单元格的行号与列号，可以用rowIndex和cellIndex来获取．
具体效果请看下面的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">  
<head>  
<title> 获取table中的rowIndex和cellIndex </title>  
<meta http-equiv="content-type" content="text/html; charset=gb2312" />  
<meta name="generator" content="editplus" />  
<meta name="author" content="枫岩,cnlei.y.l@gmail.com" />  
<meta name="keywords" content="rowIndex,cellIndex" />  
<script type="text/javascript">  
onload = function() {  
 if (!document.getElementsByTagName || !document.createTextNode) return;  
 var rows = document.getElementById('MyTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');  
  var cols;  
 for (i = 0; i < rows.length; i++) {  
 rows[i].onclick = function() {  
 alert("行:"+eval(this.rowIndex + 1));  
 }  
    cols = rows[i].getElementsByTagName('td');  
    for (j = 0; j < cols.length; j++){  
 cols[j].onclick = function() {  
 alert("列:"+eval(this.cellIndex + 1));  
 }  
    }  
 }  
}  
</script>  
</head>  
<body>  
<table id="MyTable" border="1">  
<tbody>  
 <tr><td>行1列１</td><td>行1列２</td><td>行1列3</td></tr>  
 <tr><td>行2列１</td><td>行2列２</td><td>行2列3</td></tr>  
 <tr><td>行3列１</td><td>行3列２</td><td>行3列3</td></tr>  
</tbody>  
</table>  
</body>  
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容