使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
2008-11-12 08:52
1211 查看
我几次想尝试终于被我弄成功了！
前提条件：将jquery-1.2.6.js导入进来，<script src="jquery-1.2.6.js" type="text/javascript"></script> ，jquery-1.2.6.js可以去http://jquery.com/官网下。
本代码优化后支持IE和Firefox，只需在table属性设置width和class="stripe"即可，废话少说，直接附源代码：
<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>StripingTable</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){
$(".stripe tr").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
})
$(".stripe tr:even").addClass("alt");
});
</script>
<style type="text/css">
<!--
.stripe { border-collapse:collapse; font-size:12px;margin-left: auto; margin-right: auto;}
th { background:#0066FF; color:#FFFFFF; line-height:20px; height:30px;border:1px solid #95bce2;}
td { padding:6px 11px; border-bottom:1px solid #95bce2; border-right:1px solid #95bce2; vertical-align:top; text-align:center;}
tr > td:first-child { border-left:1px solid #95bce2;}
tr.alt { background:#ecf6fc;} /*这行将给所有的tr加上背景色*/
tr.over { background:#bcd4ec;} /*这个将是鼠标高亮行的背景色*/
-->
</style>
</head>
<body>
<table class="stripe" width="50%">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
</tbody>
</table>
<p align="center">笑的自然于2008年11月12日最后编辑...</p>
</body>
</html>
前提条件：将jquery-1.2.6.js导入进来，<script src="jquery-1.2.6.js" type="text/javascript"></script> ，jquery-1.2.6.js可以去http://jquery.com/官网下。
本代码优化后支持IE和Firefox，只需在table属性设置width和class="stripe"即可，废话少说，直接附源代码：
<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>StripingTable</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){
$(".stripe tr").mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
})
$(".stripe tr:even").addClass("alt");
});
</script>
<style type="text/css">
<!--
.stripe { border-collapse:collapse; font-size:12px;margin-left: auto; margin-right: auto;}
th { background:#0066FF; color:#FFFFFF; line-height:20px; height:30px;border:1px solid #95bce2;}
td { padding:6px 11px; border-bottom:1px solid #95bce2; border-right:1px solid #95bce2; vertical-align:top; text-align:center;}
tr > td:first-child { border-left:1px solid #95bce2;}
tr.alt { background:#ecf6fc;} /*这行将给所有的tr加上背景色*/
tr.over { background:#bcd4ec;} /*这个将是鼠标高亮行的背景色*/
-->
</style>
</head>
<body>
<table class="stripe" width="50%">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
<tr>
<td>笑的自然</td>
<td>23</td>
<td>306046832</td>
<td>xiudong851116@163.com</td>
</tr>
</tbody>
</table>
<p align="center">笑的自然于2008年11月12日最后编辑...</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- jquery实现隔行变色，点击换色，鼠标悬浮当前行变色效果,div+css 细表格样式
- 使用DOM方法实现表格的隔行变色效果
- 用JQuery实现表格隔行变色和突出显示当前行
- 使用DOM方法实现表格的隔行变色效果
- 使用JQuery实现隔行变色的效果
- jQuery hover事件 使用jquery实现表格的隔行换色功能
- 使用CSS或Javascript实现隔行换色效果
- [原创]持续给力：jQuery实现表格隔行变色效果案例详解
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- 用JQuery实现表格隔行变色和突出显示当前行的代码
- 用JQuery实现表格隔行变色和突出显示当前行
- 表格的头部固定效果通过css及jquery分别实现
- 分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果
- jquery实现表格隔行换色效果
- 使用原生js和jQuery实现表格的隔行变色
- 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
- jQuery组件开发之表格隔行选中效果实现
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码