高效的表格行背景隔行变色及选定高亮的JS代码_javascript技巧
来源：懂视网
责编：小采
时间：2020-11-27 20:56:17
高效的表格行背景隔行变色及选定高亮的JS代码_javascript技巧
高效的表格行背景隔行变色及选定高亮的JS代码_javascript技巧:这段JS放在head中 代码如下: //点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById(ServiceListTable) for(var i=
导读高效的表格行背景隔行变色及选定高亮的JS代码_javascript技巧:这段JS放在head中 代码如下: //点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById(ServiceListTable) for(var i=
这段JS放在head中
代码如下:
//点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件
function selectRow(target)
{
var sTable = document.getElementById("ServiceListTable")
for(var i=1;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给页面元素添加事件
对应的表格HTML
代码如下:
服务事项 |
N |
状态 |
办结 |
资料 |
相关内容 |
|
|
|
|
相关内容 |
|
|
|
|
相关内容 |
|
|
|
|
相关内容 |
|
|
|
|
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
高效的表格行背景隔行变色及选定高亮的JS代码_javascript技巧
高效的表格行背景隔行变色及选定高亮的JS代码_javascript技巧:这段JS放在head中 代码如下: //点击当前选中行的时候设置当前行的颜色，同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById(ServiceListTable) for(var i=
