CSS控制表格隔行變色與鼠標(biāo)滑過變色.doc

1、CSS 控制表格隔行變色與鼠標(biāo)滑過變色（ 1）用 expression鼠標(biāo)滑過變色： table background-color:#000000; cursor:hand; width:100%; td onmouseover: expression(onmouseover=function()this.style.borderColor=blue;this.style.color=red;this.style.backgroundColor=yellow); onmouseout: expression(onmouseout=function()this.style.borderColor

2、=;this.style.color=;this.style.backgroundColor =);background-color:#ffffff;-第1行第 1列第2行第 2列第3行第 3列第4行第 4列第5行第 5列簡(jiǎn)單的隔行變色：第1行第 1列第2行第 2列第3行第 3列第4行第 4列第5行第 5列每個(gè)單元格變色：第1行第 1列第2行第 2列第3行第 3列第4行第 4列第5行第 5列以上都用到expression ，實(shí)現(xiàn)變得很方便，但是，經(jīng)測(cè)試，在 IE6 （其它版本我不知道）上很正常，在 firefox 上無任何反應(yīng) ，要想在 firefox 上也有此效果，就要用第二種方法（2）用

3、JS鼠標(biāo)滑過變色：window.onload=function showtable()var tablename=document.getElementById(mytable); var li=tablename.getElementsByTagName(tr); for (var i=0;i=li.length;i+)lii.style.backgroundColor=#FFB584;lii.onmouseover=function()this.style.backgroundColor=#FFFFFF;lii.onmouseout=function()this.style.backgro

4、undColor=#FFB584第1行第 1列第2行第 2列第3行第 3列第4行第 4列第5行第 5列隔行變色：window.onload=function showtable()var tablename=document.getElementById(mytable); var li=tablename.getElementsByTagName(tr); for (var i=0;i=li.length;i+)if (i%2=0)lii.style.backgroundColor=#FFB584;else lii.style.backgroundColor=#FFFFFF;第1行第 1列第

5、2行第 2列第3行第 3列第4行第 4列第5行第 5列以上都要用到JS ，還需要 table 有個(gè) id，可以對(duì)指定的table操作，但是，假如遇到某人的firefox 裝了 NoScript的話 可以無視了隔行變色的鼠標(biāo)經(jīng)過變色隔行變色的鼠標(biāo)經(jīng)過變色tableborder-collapse:collapse;border:solid#999;border-width:1px 0 0 1px;table td border:solid #999;border-width:0 1px 1px 0;.t1 background-color:#fff;.t2 background-color:#ee

6、e;.t3 background-color:#ccc;var Ptr=document.getElementsByTagName(tr); function recolor() for (i=1;i0)?t1:t2;window.onload=recolor;for(var i=0;iPtr.length;i+) Ptri.onmouseover=function()this.tmpClass=this.className;this.className = t3;Ptri.onmouseout=function()this.className=this.tmpClass;121212 表格隔行換色 +鼠標(biāo)點(diǎn)擊變色表格隔行換色 + 鼠標(biāo)點(diǎn)擊變色!-function senfe(o,a,b,c,d)vart=document.getElementById(o).getElementsByTagName(tr);for(var i=0;i鼠標(biāo)放置后變色鼠標(biāo)放置后變色 o.rows.length?0:iHead; iEnd = iEnd o.rows.length?0:iEnd;for (var i=iHead;i111111111111111111111111111111111111111111111111111111111111