jQuery双色表格

最新推荐文章于 2021-08-02 16:22:16 发布
最新推荐文章于 2021-08-02 16:22:16 发布
阅读量908 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jQuery 文章标签： jquery class function xhtml border html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wg243964183/article/details/7359371
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>StripingTable</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(document).ready(function(){ //这个就是传说的ready
$(".stripe tr").mouseover(function(){
//如果鼠标移到class为stripe的表格的tr上时，执行函数
$(this).addClass("over");}).mouseout(function(){
//给这行添加class值为over，并且当鼠标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的class
$(".stripe tr:even").addClass("alt");
//给class为stripe的表格的偶数行添加class值为alt
});
</script>
<style type="text/css">
th {
background:#0066FF;
color:#FFFFFF;
line-height:20px;
height:30px;
}
td {
padding:6px 11px;
border-bottom:1px solid #95bce2;
vertical-align:top;
text-align:center;
}
td * {
padding:6px 11px;
}
tr.alt td {
background:#ecf6fc; /*这行将给所有的tr加上背景色*/
}
tr.over td {
background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/
}
</style>
</head>
<body>
<table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
<!--用class="stripe"来标识需要使用该效果的表格-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>QQ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>王光</td>
<td>23</td>
<td>243964183</td>
<td>javawg@163.com</td>
</tr>
<tr>
<td>王光</td>
<td>23</td>
<td>243964183</td>
<td>javawg@163.com</td>
</tr>
<tr>
<td>王光</td>
<td>23</td>
<td>243964183</td>
<td>javawg@163.com</td>
</tr>
<tr>
<td>王光</td>
<td>23</td>
<td>243964183</td>
<td>javawg@163.com</td>
</tr>
<tr>
<td>王光</td>
<td>23</td>
<td>243964183</td>
<td>javawg@163.com</td>
</tr>
<tr>
<td>王光</td>
<td>23</td>

<td>243964183</td>
<td>javawg@163.com</td>
</tr>
</tbody>
</table>

</body>
</html>

jquery入门之双色表格
08-17
双色表格，鼠标放上去北京会变化
jquery 双色表格实现代码
10-29
在本例中，我们将讨论如何使用jQuery来实现一个双色表格，也就是交错着不同背景色的表格行。 首先，标题提到了“双色表格实现代码”，这表明内容将涉及到通过代码来创建一个具有交替颜色行的表格。描述中提到，之前...
JQuery实现双色表格
Feebas
11-25 1195
Document     : 双色表格         Created on : 2008-10-28, 19:23:56         Author         : Administrator -->                                         双色表格
Jquery快速制作双色表格
Developer
03-27 215
&lt;script src="jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $(".strip tr").mousemove(function(){$(this).
JQuery制作双色表格
风华正茂
07-13 913
<br />  //JQUERY制作双色表格<br />    $(document).ready(function(){<br />          //$(".stripe_tb tr"):获得class属性为stripe_tb的表格后再获取属于表格的行<br />          $(".stripe_tb tr").mouseover(function(){    //为表格的行添加mouseover事件<br />              //如果鼠标移到class为stripe_tb的表格
jQuery制作双色表格
每天进步一点点
08-26 932
Insert title here $(document).ready(function(){ $(".stripe tr").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }) $(".stripe tr:even").a
使用jQuery5分钟快速搞定双色表格的简单实例
12-02
先看看这个使用jQuery做的双色表格的效果： 这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。 第一步：写好css。 <style type="text/css"> th { /*表头样式*/ background:#0066FF; ...
jquery特效双色表格
11-29
jquery特效双色表格 jquery特效双色表格
Jquery双色表格
weixin_34174132的博客
07-22 197
Jquery双色表格 Jquery代码 ： <script src="script/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#tb tbod...
双色相间表格(绝)
10-06 1973
.DoubleColorTable tr{ background-color:expression("#FFFFFF,#EEEEEE".split(",")[rowIndex%2])}                                                      
制作双色表格.html
09-30
制作双色表格 学习新的技术和方法 制作双色表格 学习新的技术和方法
JS 实现双色表格实现代码
10-29
通过为<tr>元素添加属性或类型选择器，再通过CSS设置可以实现双色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。
jQuery双色表格的实现
管子（zero）的杂乱空间
12-29 1728
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;// --> html xmlns="http://www.w3.o
JS实现双色表格
weixin_30349597的博客
11-23 503
通过为<tr>元素添加属性或类型选择器，再通过CSS设置可以实现双色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。 原理其实很简单：利用getElementsByTagName得到所有的<tr>元素，然后分别为奇数项和偶数项的<tr>元素添加背景颜色。 核...
JQuery双色表格制作
Note
10-02 251
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
双色表格（含页面内容查找功能）（JavaScript）
weixin_48112113的博客
08-02 1332
1. 任务要求 1）简单过滤器的使用； 2）内容过滤器的使用； 3）如何获取指定元素的值？ 4）如何设置元素的样式？ 2. 需求说明 制作显示如下图所示的页面，要求如下。 （1）当页面加载完毕时，隔行变色，颜色值如上图所示，其中标题行字体颜色为白色，首行背景颜色值为：#00a40c，偶数行颜色值为#a5e5aa。 （2）当鼠标指向某一行时，该行颜色随之改变，当离开那行时，该行颜色恢复原样。 （3）输入相应的查找内容，点击...
使用jQuery5分钟快速搞定双色表格
Java高知社区
10-27 4667
先看看这个使用jQuery做的双色表格的效果： 这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。 第一步：写好css。 th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; heigh
双色球excel表格图表
cdljx255的专栏
10-18 3504
我一直想做一EXCEL表格的双色球统计图、表，包自动更新功能，不知是否有下载或有高手指点怎么做？ 
jQuery实现动态双色表格效果
"本资源介绍了一个使用jQuery实现的双色表格（StripingTable），它通过JavaScript为HTML表格添加动态效果。当鼠标滑过表格中的行（tr）时，对应的行会改变颜色，提供更好的用户体验。以下是对关键知识点的详细解释：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值