（兼容ff/ie）td點擊背景變色特效

2019-11-21 01:56:57

字體：大中小

來源：轉載

供稿：網友

<!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 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript跟隨滾動條滾動的層(浮動AD效果)

下一篇：javascript select列表內容按字母倒序排序與按列表倒序排列