比较高效的表格行背景变色及选定高亮JS
比较高效的表格行背景变色及选定高亮JS
下面这个例一摘录自:
http://blog.breakn.net/article.asp?id=447
例一:
//点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件
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);
}
<tr>
<th>服务事项</th>
<th>N</th>
<th>状态</th>
<th>办结</th>
<th>资料</th>
</tr>
<tr οnmοuseοver="rowOver(this)" οnmοuseοut="rowOut(this)" οnclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr οnmοuseοver="rowOver(this)" οnmοuseοut="rowOut(this)" οnclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr οnmοuseοver="rowOver(this)" οnmοuseοut="rowOut(this)" οnclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr οnmοuseοver="rowOver(this)" οnmοuseοut="rowOut(this)" οnclick="selectRow(this)">
<td>相关内容</td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table>
上述为Row中添加效果,做适当修改,为每个Cell添加效果:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script language="javascript">
function selectCell(target) {
var sTable = document.getElementById("table1")
for(var i=0;i<sTable.rows.length;i++) {
for(var j=0; j<sTable.rows[i].cells.length; j++) {
if (sTable.rows[i].cells[j] != target) {
sTable.rows[i].cells[j].bgColor = "#ffffff";
sTable.rows[i].cells[j].onmouseover = resumeCellOver;
sTable.rows[i].cells[j].onmouseout = resumeCellOut;
}
else {
sTable.rows[i].cells[j].bgColor = "#d3d3d3";
sTable.rows[i].cells[j].onmouseover = "";
sTable.rows[i].cells[j].onmouseout = "";
}
}
}
}
function cellOver(target) {
target.bgColor='#e4e4e4';
}
function cellOut(target) {
target.bgColor='#ffffff';
}
function resumeCellOver() {
cellOver(this);
}
function resumeCellOut() {
cellOut(this);
}
</script>
</head>
<body>
<table align="center" width="200" height="200" border="1" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)">xxx</td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)">xxx</td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)">xxx</td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)">xxx</td>
</tr>
<tr >
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)"> </td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)"> </td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)"> </td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)"> </td>
</tr>
<tr>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)">xxx</td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)">xxx</td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)">xxx</td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)">xxx</td>
</tr>
<tr>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)"> </td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)"> </td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)"> </td>
<td align="center" οnmοuseοver="cellOver(this)" οnmοuseοut="cellOut(this)" οnclick="selectCell(this)"> </td>
</tr>
</table>
</body>
</html>
转载于:https://www.cnblogs.com/tangself/archive/2009/12/07/1618465.html
比较高效的表格行背景变色及选定高亮JS相关推荐
- html 修改表格行背景,HTML表格标记教程(20):行的背景色属性BGCOLOR
框架结构标签 < frameset> 框架允许你在一个浏览器窗口内打开两个乃至多个页面.你可以这样理解,其实就是一个大 一年前网上还找不到关于 inline-block 属性的文章,为了方 ...
- Excel 下拉单元格,使整行背景变色(一看就懂)
[前言] 在日常工作中,我们常常会用到Excel表格管理我们的工作计划,一份好的Excel管理计划,往往在工作中会达到事半功倍的效果,比如我们常可以用看到有大神如下操作:在操作Excel表时候,下拉选 ...
- js行背景变色、显示提示层的代码
//保存为一个js文件,引入使用就行了 function showHelp(id) { var obj = document.getElementById(id); obj.style.display ...
- C# ListView控件显示表格(自适应宽度),添加 Checkbox,删除选择项,选中颜色和鼠标滑过背景变色
本文转载自:http://www.liangshunet.com/ca/201309/586362553.htm 亮术网 2020-03-07 本网原创 DataGridView控件功能十分强大,显示 ...
- 鼠标划过表格行变色效果JS
<!--鼠标滑过表格行变色效果开始--> <script type="text/javascript"> /* 当鼠标移到表格上是,当前一行 ...
- 更改表格行tr的背景颜色
一.业务代码说明: 制作一张商品信息表格,要求当鼠标移动到表格某一行的时候此行的背景颜色集会发生变化,当鼠标移开其背景颜色就会恢复为白色. 具体代码如下: <!DOCTYPE html> ...
- html设置表格点击变色,js实现表格变色点击行颜色改变
forword js实现表格变色点击行颜色改变 table table { border-top:1px solid black; border-left:1px solid b ...
- jquery 表格(鼠标悬停改变改变行背景+隔行换色)
NUM1:鼠标悬停改变改变行背景: NUM2:隔行换色: HTML: <table border="1"><thead><tr><th&g ...
- 鼠标指针经过表格时背景变换颜色
当表格中单元格比较多时,可以在用户鼠标指针经过时把当前行添加背景颜色,使表格内容显得清晰和一目了然,更容易阅读.接下来我们使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseou ...
最新文章
- linux计划任务怎么做,做linux计划任务的步骤
- [转]ExtJS Grid 分页时保持选中的简单实现方法
- centos7.9使用ssh命令进行登陆云服务器
- 洛谷 2585 [ZJOI2006]三色二叉树——树形dp
- eclipse下添加viplugin插件的方法
- Javascript模块化编程系列一: 模块化的驱动
- 在工作之余,你是怎么提升自己的?
- go url 参数编码和解码
- 哈工大刘铭:开放式知识图谱的自动构建技术
- 开发平台(Platform Builder 和 Embedded Visual C++)简介
- 看完这篇文章就知道为什么要使用 Node.js啦!
- Node.js调用百度地图Web服务API的Geocoding接口进行点位反地理信息编码
- HTML导航条和翻页栏
- 16、注册中心-consul
- led灯什么牌子的质量好?能够护眼的LED台灯推荐
- 一款产品经理值得拥有的团队协作神器—飞项
- 全新2007高校BBS 睿智的冷笑话
- 凤凰系统无法更新play服务器,进不去系统怎么解决,点击进入后就重启,win10和凤凰双系统...
- “天问一号”火星车命名由来
- 图文并茂的电脑组装过程讲解