使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
我几次想尝试终于被我弄成功了！
前提条件：将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>
转载于:https://www.cnblogs.com/xingxiudong/archive/2008/11/12/3987146.html
使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果相关推荐
- 使用css选择器实现表格隔行换色
使用css选择器实现表格隔行换色 <style>*{margin: 0;padding: 0;}body{padding: 200px;box-sizing: border-box;}ta ...
- css去除div连速点击的蓝色高亮效果
-moz-user-select: none;/*火狐*/ -webkit-user-select: none;/*webkit浏览器*/ -ms-user-select: none; /*IE10* ...
- 【JavaWeb】TableDemo 表格隔行显色+鼠标悬停高亮显示
[普通表格-非隔行显色] approach1 <script type="text/javascript">window.onload = function () {/ ...
- Javascript知识【案例：表格隔行换色】
目录 1,案例1:表格隔行换色 2,案例2:鼠标移入粉色,移出原色[基础+] 2.1:需求说明 2.2:前置知识:鼠标移入移出事件 2.3:前置拓展知识:this关键字 2.4:分析&实现 1 ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- jquery表格隔行变色
结果如下图: <!doctype html> <html> <head><meta http-equiv="content-type" c ...
- html table 转置,jQuery+CSS实现的table表格行列转置功能示例
本文实例讲述了jQuery+CSS实现的table表格行列转置功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery行列转置 table ...
- 前端html利用CSS实现table表格斑马纹隔行换色效果
在网页中,表格是一种常用的数据展示方式,如下面的实例就是一个收支数据的表格. <!DOCTYPE html> <html lang="en"><hea ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...
最新文章
- 慕课网_《Java微信公众号开发进阶》学习总结
- 矩陣 线性递归 斐波那契實現
- boost::contract模块实现ifdef功能测试程序
- iOS设计模式 - 命令模式
- 在带有组合框的值列表的下拉列表中显示显示属性的子集
- oracle全角字符转半角,Oracle 表字段全角字符轉換半角字符辦法
- 用c语言构建二叉树（重点）
- jeecgboot前端开发_Jeecg-Boot 技术文档
- c++ class struct同名_如何把C++的源代码改写成C代码？而C改C++只需一步！
- 选择排序、冒泡排序、异或运算
- 文件与目录的默认权限与隐藏权限
- 启动root用户 银河麒麟_银河麒麟Kydroid 2.0全新发布：原生支持海量安卓APP
- ADO中最重要的对象有三个：Connection、Recordset和Command
- GPS卫星星历与卫星历书的区别
- linux ubuntu extmail,利用Ubuntu ExtMail 30分钟配置好一个功能强大的邮件
- easyui 快速入门之第一章
- 【第一期】大话计算机网络(猫、路由器、wifi)
- byte json 互转_Json互转
- 岛屿问题 通用解-463.岛屿周长-200.岛屿数量-695.岛屿的最大面积-827.最大人工岛
- Sound Forge2020音频编辑软件直装汉化直装免费版