parentElement,srcElement using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
  <P>&nbsp;</P>
<SCRIPT language=javascript>
function showHide(obj)
{
var objin=obj.parentElement.parentElement.rows[1].style;
objin.display=="none"?objin.display="block":objin.display="none";
}

</SCRIPT>
演示程序
<TABLE height=300 width="100%" border=0>
<TBODY>
<TR>
<TD style="CURSOR: hand" onclick=showHide(this);>...click me </TD></TR>
<TR>
<TD>...显示1 </TD></TR>
<TR>
<TD>...显示2 </TD></TR></TBODY></TABLE>
 </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" xml:lang="en" lang="en">
<head>
  
<title></title>
  
<script type="text/javascript">
    
function tdclick(){
        
if(event.srcElement.tagName.toLowerCase()=='td')
            alert("
行:"+(event.srcElement.parentNode.rowIndex+1)+"列:"+(event.srcElement.cellIndex+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>

 

感觉这个挺好,可以捕获当前事件作用的对象,如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" xml:lang="en" lang="en">
<head>
  
<title></title>
  
<script type="text/javascript">
    
function tdclick(){
        
if(event.srcElement.tagName.toLowerCase()=='td')
            alert("
行:"+(event.srcElement.parentNode.rowIndex+1)+"列:"+(event.srcElement.cellIndex+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>

 

 

 

 

原文地址:https://www.cnblogs.com/shengel/p/1254286.html