javascript学习笔记(十)表格隔行换色,鼠标经过时高亮显示
2011-04-12 17:26
507 查看
在网页的,表格的布局经常可见,当表格的行数非常多的,很容易引起用户的视觉疲劳,而且容易让用户把相邻两行的数据看错。我们可以通过隔行换色以及高亮的方法的来改善用户体验!
如果用css来实现,前台的代码会略显不优雅,比如在奇数行我们需要添加<tr class="odd">这样的代码来实现隔行换色,而且如果是从后台动态输出的网页,这是无法实现的,除非用程序去控制。tr:hover 在ie6下是不支持的。所以还是不能完全满足我们的要求。
这里我们可以用javascript来帮我们实现以上需求。主要就是操作DOM。
首先看HTML代码:
javascript部分代码:
css部分代码:
完整代码示例:
完整代码示例
如果用css来实现,前台的代码会略显不优雅,比如在奇数行我们需要添加<tr class="odd">这样的代码来实现隔行换色,而且如果是从后台动态输出的网页,这是无法实现的,除非用程序去控制。tr:hover 在ie6下是不支持的。所以还是不能完全满足我们的要求。
这里我们可以用javascript来帮我们实现以上需求。主要就是操作DOM。
首先看HTML代码:
<h1>会员信息表</h1> <table summary="user infomation table"> <thead> <tr> <th>会员ID</th> <th>会员名</th> <th>邮箱</th> <th>会员组</th> <th>城市</th> <th>注册时间</th> </tr> </thead> <tbody> <tr> <td>126</td> <td>webw3c</td> <td>este@126.com</td> <td>普通会员</td> <td>武汉</td> <td>2011-04-01</td> </tr> <tr> <td>127</td> <td>test001</td> <td>test001@126.com</td> <td>普通会员</td> <td>北京</td> <td>2011-04-03</td> </tr> <tr> <td>128</td> <td>wuliao</td> <td>wuliao@126.com</td> <td>普通会员</td> <td>南昌</td> <td>2011-04-04</td> </tr> <tr> <td>129</td> <td>tired</td> <td>tired@126.com</td> <td>中级会员</td> <td>北京</td> <td>2011-04-06</td> </tr> <tr> <td>130</td> <td>tiredso</td> <td>tireds0@126.com</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-06</td> </tr> <tr> <td>131</td> <td>javascript</td> <td>js2011@126.com</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-08</td> </tr> <tr> <td>132</td> <td>jQuery</td> <td>jQuery@126.com</td> <td>高级会员</td> <td>北京</td> <td>2011-04-12</td> </tr> </tbody> </table> </div>
javascript部分代码:
//动态给js添加class属性 function addClass(element, value) { if(!element.className) { element.className = value; //如果element本身不存在class,则直接添加class为value的值 } else { element.className += " "+value; //如果element之前有一个class值,注意中间要多一个空格,然后再加上value的值 } } //隔行换色 function stripeTable() { var tables = document.getElementsByTagName("table"); //遍历文档中的所有table for(var i=0; i<tables.length; i++) { var rows = document.getElementsByTagName("tr"); for(var j=0; j<rows.length; j++) { if(j%2 == 0) { addClass(rows[j], "odd"); //如是偶数行,则添加class为odd的属性 //rows[j].setAttribute("class", "odd"); } } } } //鼠标经过时高亮 function highlightRows() { var rows = document.getElementsByTagName("tr"); for(var i=0; i<rows.length; i++) { rows[i].oldClassName = rows[i].className; //首先保存之前的class值 rows[i].onmouseover = function() { addClass(this, "highlight"); //鼠标经过时添加class为highlight的值 } rows[i].onmouseout = function() { this.className = this.oldClassName; //鼠标离开时还原之前的class值 } } } window.onload = function() { stripeTable(); highlightRows(); }
css部分代码:
* { padding:0; margin:0; } body { font-family:verdana; font-size:12px; } .content { width:550px; margin:20px auto; } .content h1 { font-family:'微软雅黑'; font-size:18px; padding-bottom:5px; } table { width:100%; } th, td { padding:6px 0; text-align:center; } th { background-color:#007D28; color:#ffffff; } tr { background-color:#E8FFE8; } .odd { background-color:#FFF3EE; } .highlight { background-color:#E0E0E0; }
完整代码示例:
完整代码示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>stripe tables</title> <style type="text/css"> * { padding:0; margin:0; } body { font-family:verdana; font-size:12px; } .content { width:550px; margin:20px auto; } .content h1 { font-family:'微软雅黑'; font-size:18px; padding-bottom:5px; } table { width:100%; } th, td { padding:6px 0; text-align:center; } th { background-color:#007D28; color:#ffffff; } tr { background-color:#E8FFE8; } .odd { background-color:#FFF3EE; } .highlight { background-color:#E0E0E0; } </style> <script type="text/javascript"> //动态给js添加class属性 function addClass(element, value) { if(!element.className) { element.className = value; //如果element本身不存在class,则直接添加class为value的值 } else { element.className += " "+value; //如果element之前有一个class值,注意中间要多一个空格,然后再加上value的值 } } function stripeTable() { var tables = document.getElementsByTagName("table"); //遍历文档中的所有table for(var i=0; i<tables.length; i++) { var rows = document.getElementsByTagName("tr"); for(var j=0; j<rows.length; j++) { if(j%2 == 0) { addClass(rows[j], "odd"); //如是偶数行,则添加class为odd的属性 //rows[j].setAttribute("class", "odd"); } } } } function highlightRows() { var rows = document.getElementsByTagName("tr"); for(var i=0; i<rows.length; i++) { rows[i].oldClassName = rows[i].className; //首先保存之前的class值 rows[i].onmouseover = function() { addClass(this, "highlight"); //鼠标经过时添加class为highlight的值 } rows[i].onmouseout = function() { this.className = this.oldClassName; //鼠标离开时还原之前的class值 } } } window.onload = function() { stripeTable(); highlightRows(); } </script> </head> <body> <div class="content"> <h1>会员信息表</h1> <table summary="user infomation table"> <thead> <tr> <th>会员ID</th> <th>会员名</th> <th>邮箱</th> <th>会员组</th> <th>城市</th> <th>注册时间</th> </tr> </thead> <tbody> <tr> <td>126</td> <td>webw3c</td> <td>este@126.com</td> <td>普通会员</td> <td>武汉</td> <td>2011-04-01</td> </tr> <tr> <td>127</td> <td>test001</td> <td>test001@126.com</td> <td>普通会员</td> <td>北京</td> <td>2011-04-03</td> </tr> <tr> <td>128</td> <td>wuliao</td> <td>wuliao@126.com</td> <td>普通会员</td> <td>南昌</td> <td>2011-04-04</td> </tr> <tr> <td>129</td> <td>tired</td> <td>tired@126.com</td> <td>中级会员</td> <td>北京</td> <td>2011-04-06</td> </tr> <tr> <td>130</td> <td>tiredso</td> <td>tireds0@126.com</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-06</td> </tr> <tr> <td>131</td> <td>javascript</td> <td>js2011@126.com</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-08</td> </tr> <tr> <td>132</td> <td>jQuery</td> <td>jQuery@126.com</td> <td>高级会员</td> <td>北京</td> <td>2011-04-12</td> </tr> </tbody> </table> </div> </body> </html>
相关文章推荐
- 表格隔行换色,鼠标经过时高亮显示
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- JQuery实现表格隔行变色,鼠标经过的行放大显示
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
- JS实现表格隔行换色,鼠标经过换色,单击换色,再单击还原等功能
- jQuery插件实现表格隔行换色且感应鼠标高亮行变色
- Dom编程(表格的行与行之间以颜色间隔、鼠标经过行以高亮显示)
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- 实现隔行颜色交替、鼠标经过高亮颜色
- 鼠标经过的图片高亮显示,其余变暗效果[xyytit]
- 鼠标经过文本后高亮显示
- jsp制作复合表头并循环产生表格内容,控制隔行变色、鼠标经过改变背景色等操作
- js实现表格隔行变色和鼠标移入高亮
- jQuery实现table表格隔行换色鼠标经过变色
- JS实战 · 表格行颜色间隔显示,并在鼠标指定行上高亮显示
- JQuery操作表格(隔行着色,高亮显示,筛选数据)
- 鼠标经过的行高亮显示(在datagrid中)
- GridView显示数据特效——鼠标经过行背景高亮并呈手型
- 鼠标经过表格行时,显示变色、字体放大效果 jquery
- “鼠标移至表格中某一行时,此行高亮显示”通用解决方案