专注于互联网--专注于架构

最新标签
网站地图
文章索引
Rss订阅

首页 »Javascript教程 » js高亮:比较高效的表格行背景变色及选定高亮JS »正文

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

来源: 发布时间:星期六, 2008年12月13日 浏览:108次 评论:0
  个项目要用又不想用jquery之类东东先去网上搜索了下找到了不少在CSS中执行JS表格行变色方式不过这类方式在表格行多时候相当卡就自己按着最原始方式倒腾了个出来献给广大JS小白们(本人也算上JS小白之在IE7和firefox3中测试正常

  这段JS放在head中view plaincopy to clipboardpr?
//点击当前选中行时候设置当前行颜色同时恢复除当前行外颜色及鼠标事件
function selectRow(target)
{
var sTable = document.getElementById("ServiceListTable")
for(var i=1;i<sTable.rows.length;i) //遍历除第行外所有行
{
(sTable.rows[i] != target) //判断是否当前选定行
{
sTable.rows[i].bgColor = "#ffffff"; //设置背景色
sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
}

{
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';
}
//恢复tronmouseover事件配套
function resumeRowOver
{
rowOver(this);
}
//恢复tronmouseout事件配套
function resumeRowOut
{
rowOut(this);
}

//点击当前选中行时候设置当前行颜色同时恢复除当前行外颜色及鼠标事件
function selectRow(target)
{
var sTable = document.getElementById("ServiceListTable")
for(var i=1;i<sTable.rows.length;i) //遍历除第行外所有行
{
(sTable.rows[i] != target) //判断是否当前选定行
{
sTable.rows[i].bgColor = "#ffffff"; //设置背景色
sTable.rows[i].onmouseover = resumeRowOver; //增加onmouseover 事件
sTable.rows[i].onmouseout = resumeRowOut;//增加onmouseout 事件
}

{
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';
}
//恢复tronmouseover事件配套
function resumeRowOver
{
rowOver(this);
}
//恢复tronmouseout事件配套
function resumeRowOut
{
rowOut(this);
}  关于最后两个resumeRowOver和resumeRowOut为什么这样写参考我之前写通过js给页面元素添加事件
  对应表格HTMLview plaincopy to clipboardpr?
<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 _disibledevent=447

0

相关文章

读者评论

发表评论

  • 昵称:
  • 内容: