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

最新推荐文章于 2023-08-08 16:33:55 发布

MPU

最新推荐文章于 2023-08-08 16:33:55 发布

阅读量2.1k

点赞数

分类专栏： Web 文章标签： class c function table border google

Web 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

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

做一个表格列表中整行鼠标移动变色的效果,找了一段现成代码再改了一点,加上鼠标点击变色和再点击变回原色的效果.
一个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 猪飞飞]