（兼容ff/ie）td点击背景变色特效- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > （兼容ff/ie）td点击背景变色特效

Javascript: MooTools教程(3):数组管理DOM元素; MooTools教程(4):函数和MooTools; MooTools教程(5):事件处理; MooTools教程(6):操纵HTML DOM元素; MooTools教程(7):设置和获取样式表属性; MooTools教程(8):输入过滤-数字; MooTools教程(9):输入过滤-字符串; MooTools教程(10):Fx.Tween渐变; MooTools教程(11):Fx.Morph、Fx选项和Fx事件; MooTools教程(12):Drag.Move来实现拖放; MooTools教程(13):正则表达式; MooTools教程(14):定时器和Hash对象; MooTools教程(15):滚动条(Slider); 浏览器对Cookie的限制; 图片不间断滚动的特效代码详细讲解; Javascript教程:拖放效果研究; 不唐突的JavaScript; JavaScript教程:图片切割效果; 认识AJAX了解AJAX优点缺点和运用; 网页投票系统中的限制

No. « ‹ 166 167 168 169 › »

技术文章搜索

关键字

Javascript 中的（兼容ff/ie）td点击背景变色特效

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 348 ::

收藏到网摘: n/a

javascript select列表内容按字母倒序排序与按列表倒序排列 javascript跟随滚动条滚动的层(浮动AD效果)

点击运行可以看到效果:

<!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> <style type="text/css"> .class1{ background:#efefef; text-align:center; width:80px; } .class2{ background: #ffcc00; text-align:center; width: 80px; } .class3{ background: #ffffff; } .class4{ background: #ffff00; } </style> <script type="text/javascript"> function addEvent(elm, evType, fn, useCapture){ if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent){ var r = elm.attachEvent("on"+evType, fn); return r; } else { alert("Handler could not be removed"); } } function initTd(){ var sections=document.getElementsByTagName("td"); for(var i=0;i<sections.length;i++){ var section=sections[i]; if(section.getAttribute("t")=="yes"){ section.className="class1"; section.nextSibling.className="class3"; addEvent(section,"click",changeTd); } } } function changeTd(ev){ var ev=ev||window.event; var evt=ev.srcElement||ev.target; if(evt.tagName=="TD"&&evt.getAttribute("t")=="yes"){ var sections=document.getElementsByTagName("td"); for(var i=0;i<sections.length;i++){ var section=sections[i]; if(section.getAttribute("t")=="yes"){ section.className="class1"; section.nextSibling.className="class3"; evt.className="class2"; evt.nextSibling.className="class4"; } } } } </script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1" bordercolor="#cccccc" style="border-collapse:collapse" align="center" width="300">
<tr><td t="yes">a</td><td>this is section a</td></tr>
<tr><td t="yes">b</td><td>this is section b</td></tr>
<tr><td t="yes">c</td><td>this is section c</td></tr>
<tr><td t="yes">d</td><td>this is section d</td></tr>
</table>
<script type="text/javascript">
initTd();
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript select列表内容按字母倒序排序与按列表倒序排列 javascript跟随滚动条滚动的层(浮动AD效果)

Javascript 中的 （兼容ff/ie）td点击背景变色特效

评论 (0) All

Javascript 中的（兼容ff/ie）td点击背景变色特效