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> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

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

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

赞 (0)

相关推荐

  • js parentElement和offsetParent之间的区别

    首先是 parentElement 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 这里主要说的是 offsetParent 属性,这个属性在 MSDN 的文档中也没有解释清楚,这就让人更难理解这个属性. 这几天在网上找了些资料看看,再加上自己的一些测试,对此属性有了那么一点的了解,在这里总结一下. 要明白 offsetParent 属性,要先明白"已定位元素" 这个名字,所谓&

  • Js中parentNode,parentElement,childNodes,children之间的区别

    parentElement 获取对象层次中的父对象.  parentNode 获取文档层次中的父对象.  childNodes 获取作为指定对象直接后代的 HTML 元素和 TextNode 对象的集合.  children 获取作为对象直接后代的 DHTML 对象的集合. -------------------------------------------------------- parentNode和parentElement功能一样,childNodes和children功能一样.但是

  • 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="

  • event.srcElement 用法笔记e.target

    注意获取的标记都以大写表示,如"TD","TR","A"等.所以把看过的一些抄下来,不记得的时候再来看看. 复制代码 代码如下: <script type="text/javascript"> function tdclick(){ if(event.srcElement.tagName.toLowerCase()=='td') alert("行:"+(event.srcElement.pare

  • JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结

    1.兼容firefox的 outerHTML,FF中没有outerHtml的方法. 复制代码 代码如下: if (window.HTMLElement) { HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) { var r=this.ownerDocument.createRange(); r.setStartBefore(this); var df=r.createContextualFragment

  • event.srcElement+表格应用

    <script language="JavaScript1.2"> function changeto(highlightcolor){ source=event.srcElement if (source.tagName=="TR"||source.tagName=="TABLE") return while(source.tagName!="TD") source=source.parentElement if

  • IE event.srcElement和FF event.target 功能比较

    注意获取的标记都以大写表示,如"TD","TR","A"等 复制代码 代码如下: <div id="div_001"> <form id="form_001"> <input type="button" id="button_001_id" name="button_001_Name" value="单击查看

  • srcElement表格样式

    <script language="JavaScript1.2"> function changeto(highlightcolor){ source=event.srcElement if (source.tagName=="TR"||source.tagName=="TABLE") return while(source.tagName!="TD") source=source.parentElement if

  • JAVASCRIPT IE 与 FF中兼容问题小结

    png透明 AlphaImageLoaderfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL) enabled:可选项.布尔值(Boolean).设置或检索滤镜是否激活.true:默认值.滤镜激活.false:滤镜被禁止.sizingMethod:可选项.字符串(String).设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式.cro

  • js中的触发事件对象event.srcElement与event.target详解

    js中的触发事件对象event.srcElement与event.target详解

    介绍 IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: firefox 下的 event.target = IE 下的 event.srcElement 解决方法 使用obj = event.srcElement ? event.srcElement : event.target; 或:var evtTarget = event.target || eve

  • JavaScript事件学习小结（一）事件流

    JavaScript事件学习小结（一）事件流

    相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

  • IE和Firefox下javascript的兼容写法小结

    1.发现IE下input标签的id属性默认和name属性相同,而Firefox必须明确写出id属性的名称否则不能使用id属性. 如:<input type="text" name="username" value=""> 在IE下如下代码可以执行而在Firefox下却不可以: <script> alert(document.getElementById("username").value); </

随机推荐