javascript关于table的有关问题
日期：2014-05-16 浏览次数：20473 次
javascript关于table的问题
现在我有个动态生成的table,每个单元格里面是一个数字,每个数字都是个超连接.
现在我点击数字,能不能得到这个数字的行和列的索引,在页面下放显示出来?
重点是怎么得到行和列的索引,请高手指点.
------解决方案--------------------
cellIndex和rowIndex属性
------解决方案--------------------
<html>
<head>
<script language=javascript>
function a(o){
var col=o.parentNode.id;
var row=o.parentNode.parentNode.id;
alert( "col: "+col+ ";row: "+row);
}
</script>
</head>
<body>
<table border=1 width= "100 ">
<tr id= "1 "> <td id= "1 " > <a href= "# " onclick= "a(this) "> 1 </a> </td> <td id= "2 "> <a href= "# " onclick= "a(this) "> 2 </a> </td> </tr>
<tr id= "2 "> <td id= "1 "> <a href= "# " onclick= "a(this) "> 3 </a> </td> <td id= "2 "> <a href= "# " onclick= "a(this) "> 4 </a> </td> </tr>
<tr id= "3 "> <td id= "1 "> <a href= "# " onclick= "a(this) "> 5 </a> </td> <td id= "2 "> <a href= "# " onclick= "a(this) "> 6 </a> </td> </tr>
<tr id= "4 "> <td id= "1 "> <a href= "# " onclick= "a(this) "> 7 </a> </td> <td id= "2 "> <a href= "# " onclick= "a(this) "> 8 </a> </td> </tr>
</table>
</body>
</html>
------解决方案--------------------
<html>
<head>
<title> new page </title>
<script language=javascript>
function a(obj){
var col=obj.parentNode.cellIndex;//列索引，初始值为0
var row=obj.parentNode.parentNode.rowIndex;//行索引，初始值为0
alert( "col: "+col+ ";row: "+row);
}
</script>
</head>
<body>
<table border=1 width= "100 ">
<tr>
<td> <a href= "# " onclick= "a(this) "> 1 </a> </td>
<td> <a href= "# " onclick= "a(this) "> 2 </a> </td>
</tr>
<tr>
<td> <a href= "# " onclick= "a(this) "> 3 </a> </td>
<td> <a href= "# " onclick= "a(this) "> 4 </a> </td>
</tr>
<tr>
<td> <a href= "# " onclick= "a(this) "> 5 </a> </td>
<td> <a href= "# " onclick= "a(this) "> 6 </a> </td>
</tr>
<tr>
<td> <a href= "# " onclick= "a(this) "> 7 </a> </td>
<td> <a href= "# " onclick= "a(this) "> 8 </a> </td>
</tr>
</table>
</body>
</html>
现在我有个动态生成的table,每个单元格里面是一个数字,每个数字都是个超连接.
现在我点击数字,能不能得到这个数字的行和列的索引,在页面下放显示出来?
重点是怎么得到行和列的索引,请高手指点.
------解决方案--------------------
cellIndex和rowIndex属性
------解决方案--------------------
<html>
<head>
<script language=javascript>
function a(o){
var col=o.parentNode.id;
var row=o.parentNode.parentNode.id;
alert( "col: "+col+ ";row: "+row);
}
</script>
</head>
<body>
<table border=1 width= "100 ">
<tr id= "1 "> <td id= "1 " > <a href= "# " onclick= "a(this) "> 1 </a> </td> <td id= "2 "> <a href= "# " onclick= "a(this) "> 2 </a> </td> </tr>
<tr id= "2 "> <td id= "1 "> <a href= "# " onclick= "a(this) "> 3 </a> </td> <td id= "2 "> <a href= "# " onclick= "a(this) "> 4 </a> </td> </tr>
<tr id= "3 "> <td id= "1 "> <a href= "# " onclick= "a(this) "> 5 </a> </td> <td id= "2 "> <a href= "# " onclick= "a(this) "> 6 </a> </td> </tr>
<tr id= "4 "> <td id= "1 "> <a href= "# " onclick= "a(this) "> 7 </a> </td> <td id= "2 "> <a href= "# " onclick= "a(this) "> 8 </a> </td> </tr>
</table>
</body>
</html>
------解决方案--------------------
<html>
<head>
<title> new page </title>
<script language=javascript>
function a(obj){
var col=obj.parentNode.cellIndex;//列索引，初始值为0
var row=obj.parentNode.parentNode.rowIndex;//行索引，初始值为0
alert( "col: "+col+ ";row: "+row);
}
</script>
</head>
<body>
<table border=1 width= "100 ">
<tr>
<td> <a href= "# " onclick= "a(this) "> 1 </a> </td>
<td> <a href= "# " onclick= "a(this) "> 2 </a> </td>
</tr>
<tr>
<td> <a href= "# " onclick= "a(this) "> 3 </a> </td>
<td> <a href= "# " onclick= "a(this) "> 4 </a> </td>
</tr>
<tr>
<td> <a href= "# " onclick= "a(this) "> 5 </a> </td>
<td> <a href= "# " onclick= "a(this) "> 6 </a> </td>
</tr>
<tr>
<td> <a href= "# " onclick= "a(this) "> 7 </a> </td>
<td> <a href= "# " onclick= "a(this) "> 8 </a> </td>
</tr>
</table>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
