开发学院网页设计JavaScript 比较高效的表格行背景变色及选定高亮JS 阅读

比较高效的表格行背景变色及选定高亮JS

 2008-12-12 20:04:35 来源:WEB开发网   
核心提示:一个项目要用,又不想用jquery之类的东东,比较高效的表格行背景变色及选定高亮JS,先去网上搜索了下,找到了不少在CSS中执行JS的表格行变色方式,在IE7和Firefox3中测试正常,这段JS放在head中view plaincopy to clipboardPRint?//点击当前选中行的时候设置当前行的颜色,不

一个项目要用,又不想用jquery之类的东东。先去网上搜索了下,找到了不少在CSS中执行JS的表格行变色方式,不过这类方式在表格行多的时候相当卡,就自己按着最原始的方式倒腾了个出来献给广大的JS小白们(本人也算上JS小白之一  ),在IE7和Firefox3中测试正常。

这段JS放在head中view plaincopy to clipboardPRint?
//点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 
function selectRow(target) 
{ 
var sTable = document.getElementById("ServiceListTable") 
for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 
{ 
if (sTable.rows[i] != target) //判断是否当前选定行 
{ 
sTable.rows[i].bgColor = "#ffffff"; //设置背景色 
sTable.rows[i].onmouSEOver = resumeRowOver; //增加onmouseover 事件 
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件 
} 
else 
{ 
sTable.rows[i].bgColor = "#d3d3d3"; 
sTable.rows[i].onmouseover = ""; //去除鼠标事件 
sTable.rows[i].onmouseout = ""; //去除鼠标事件 
} 
} 
} 
//移过时tr的背景色 
function rowOver(target) 
{ 
target.bgColor='#e4e4e4'; 
} 
//移出时tr的背景色 
function rowOut(target) 
{ 
target.bgColor='#ffffff'; 
} 
//恢复tr的的onmouseover事件配套调用函数 
function resumeRowOver() 
{ 
rowOver(this); 
} 
//恢复tr的的onmouseout事件配套调用函数 
function resumeRowOut() 
{ 
rowOut(this); 

 //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件
 function selectRow(target)
 {
 var sTable = document.getElementById("ServiceListTable")
 for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行
 {
 if (sTable.rows[i] != target) //判断是否当前选定行
 {
 sTable.rows[i].bgColor = "#ffffff"; //设置背景色
 sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
 sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
 }
 else
 {
 sTable.rows[i].bgColor = "#d3d3d3";
 sTable.rows[i].onmouseover = ""; //去除鼠标事件
 sTable.rows[i].onmouseout = ""; //去除鼠标事件
 }
 }
 }
 //移过时tr的背景色
 function rowOver(target)
 {
 target.bgColor='#e4e4e4';
 }
 //移出时tr的背景色
 function rowOut(target)
 {
 target.bgColor='#ffffff';
 }
 //恢复tr的的onmouseover事件配套调用函数
 function resumeRowOver()
 {
 rowOver(this);
 }
 //恢复tr的的onmouseout事件配套调用函数
 function resumeRowOut()
 {
 rowOut(this);
 }  关于最后两个函数resumeRowOver和resumeRowOut为什么这样写参考我之前写的通过js给页面元素添加事件
  对应的表格HTMLview plaincopy to clipboardprint?
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable"> 
<tr> 
<th>服务事项</th> 
<th>N</th> 
<th>状态</th> 
<th>办结</th> 
<th>资料</th> 
</tr> 
<tr > 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr > 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr > 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
<tr > 
<td>相关内容</td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
<td align="center"> </td> 
</tr> 
</table> 
from:http://blog.breakn.net/article.asp?id=447

Tags:比较 高效 表格

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读