代码

<!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>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=””>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
<script type=”text/javascript”>
function ShowHide(obj){
    var objin=obj.parentElement.parentElement.rows[1].style;
    //var objin=obj.parentElement.parentElement.parentElement.rows[1].style;
    objin.display==“none“?objin.display=“block“:objin.display=“none“;
}

</script>
</head>
<body>
<table border=”1″ cellpadding=”0″ cellspacing=”0″>
<tbody>
<tr>
<td style=”cursor:pointer;”  onclick=”ShowHide(this)”>Click Me!</td>
</tr>
<tr>
<td><table>
<tr>1111111111111111</tr>
<tr>2222222222222222</tr>
<tr>3333333333333333</tr>
<tr>4444444444444444</tr>
<tr>5555555555555555</tr>
</table></td>
</tr>
</tbody>
</table>
 </BODY>
</HTML>
</body>
</html>

 

 

 

感觉这个挺好，可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。
注意获取的标记都以大写表示，如“TD”,”TR”,”A”等。

偶应用event.srcElement把以前的一个代码重写了下，扩展了其功能，很简单的一段代码。

 

 

代码

<!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>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=””>
<META NAME=”Keywords” CONTENT=””>
<META NAME=”Description” CONTENT=””>
<script type=”text/ecmascript”>
function tdClick(){
    if(event.srcElement.tagName.toLowerCase()==\’td\’){
        alert(“行:“+(event.srcElement.parentNode.rowIndex+1)+“列:“+(event.srcElement.cellIndex+1));
        //alert(“行:”+(event.srcElement.parentElement.rowIndex+1));
    }
}
</script>
</head>
<body>

<table align=”center” onclick=”tdClick()” width=”100%” height=”400″ cellspacing=”1″ border=”1″ bordercolor=”#000000″ bordercolorlight=”#000000″ bordercolordark=”#C0C0C0″ bgcolor=”#C0C0C0″>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

 

 

对于以上Table中用bordercolordark和bordercolorlight的说明如下:

html 中bordercolordark和bordercolorlight的区别

 

窗体要呈现立体感时，需要两个边框为亮色，剩下两个边框为暗色。
bordercolorlight和bordercolordark分别代表亮色和暗色。

 转自:http://www.cnblogs.com/shengel/archive/2008/07/28/1254286.html

版权声明：本文为jhxk原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jhxk/articles/1647670.html