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

王朝html/css/js·作者佚名  2008-12-13
窄屏简体版  字體: |||超大  

一个项目要用,又不想用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 onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>相关内容</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>相关内容</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>相关内容</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

</tr>

<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">

<td>相关内容</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

<td align="center">&nbsp;</td>

</tr>

</table>

from:http://blog.breakn.net/article.asp?id=447

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航