parentElement,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/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

转载于:https://www.cnblogs.com/jhxk/articles/1647670.html