页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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 全选提示:你可先修改部分代码,再按运行]

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

百度中搜索更多的关于（兼容ff/ie）td点击背景变色特效内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

0

上一篇文章：javascript使用Dom改变超链接前面文本框的值
下一篇文章：li隔行换色改进版

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行