parentElement,srcElement 使用_htmlparentElement,srcElement 使用_html_02代码


<!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把以前的一个代码重写了下,扩展了其功能,很简单的一段代码。

 

 


parentElement,srcElement 使用_htmlparentElement,srcElement 使用_html_02代码


<!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分别代表亮色和暗色。