表格行鼠标事件变色的例子

技术2022-05-11 61

表格行鼠标事件变色的例子

注：本文收藏自网络（猪飞飞's Blog ），文责版权均为原作者所有，本人仅作收藏学习之用。以下为引用：做一个表格列表中整行鼠标移动变色的效果,找了一段现成代码再改了一点,加上鼠标点击变色和再点击变回原色的效果. 一个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()" onclick ="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 >

专利

最新回复(0)