表格行鼠标事件变色的例子
做一个表格列表中整行鼠标移动变色的效果,找了一段现成代码再改了一点,加上鼠标点击变色和再点击变回原色的效果.
一个N行N列的表格,实现鼠标移到某行变色,然后点击某一行使之固定一种颜色,再点使之返回原色.原理是使<tr>保持原色,鼠标事件对<tr>下的<td>样式背景色进行改变.同时可以设置避免变色事件的行,主要是针对标题行.相信这段代码对需要做项目比较多的数据列表的朋友有用,我在google和blueidea都找了一遍,没找到完全现成的.
具体请看js代码:
<HTML> <HEAD> <TITLE>变色表格</TITLE> <style> .c1{ background-color:#fff; } .c2{ background-color:#ccc; } #nc{ background-color:#000; color:#fff; } </style> <script> var highlightcolor='#333'; //此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:( var clickcolor='orange'; function changeto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor) for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=highlightcolor; } } function changeback(){ if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc") return if (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor) //source.style.backgroundColor=originalcolor for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } function clickto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=clickcolor&&source.id!="nc") for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=clickcolor; } else for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } </script> </HEAD> <BODY> <div id='snwcwt'> <table width="1400" border="0" cellspacing="1" cellpadding="1" onMouseover="changeto()" onMouseout="changeback()" οnclick="clickto()"> <tr id="nc"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> </table> </div> </BODY> </HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
一个N行N列的表格,实现鼠标移到某行变色,然后点击某一行使之固定一种颜色,再点使之返回原色.原理是使<tr>保持原色,鼠标事件对<tr>下的<td>样式背景色进行改变.同时可以设置避免变色事件的行,主要是针对标题行.相信这段代码对需要做项目比较多的数据列表的朋友有用,我在google和blueidea都找了一遍,没找到完全现成的.
具体请看js代码:
<HTML> <HEAD> <TITLE>变色表格</TITLE> <style> .c1{ background-color:#fff; } .c2{ background-color:#ccc; } #nc{ background-color:#000; color:#fff; } </style> <script> var highlightcolor='#333'; //此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:( var clickcolor='orange'; function changeto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor) for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=highlightcolor; } } function changeback(){ if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc") return if (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor) //source.style.backgroundColor=originalcolor for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } function clickto(){ source=event.srcElement; if (source.tagName=="TR"||source.tagName=="TABLE") return; while(source.tagName!="TD") source=source.parentElement; source=source.parentElement; cs = source.children; //alert(cs.length); if (cs[1].style.backgroundColor!=clickcolor&&source.id!="nc") for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=clickcolor; } else for(i=0;i<cs.length;i++){ cs[i].style.backgroundColor=""; } } </script> </HEAD> <BODY> <div id='snwcwt'> <table width="1400" border="0" cellspacing="1" cellpadding="1" onMouseover="changeto()" onMouseout="changeback()" οnclick="clickto()"> <tr id="nc"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> <tr class="c1"> <td>dddd</td> <td>kkkk</td> <td>kkkkk</td> <td>kkkkk</td> <td>kkkk</td> </tr> <tr class="c2"> <td>kkkk</td> <td>kk</td> <td>k</td> <td>k</td> <td>k</td> </tr> </table> </div> </BODY> </HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
[Edit on 2006-7-11 22:50:07 By 猪飞飞]
270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
