JQuery实现双色表格

最新推荐文章于 2014-08-26 23:33:53 发布
最新推荐文章于 2014-08-26 23:33:53 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 修炼之JQuery 文章标签： jquery class function html border
<!--

        Document     : 双色表格

        Created on : 2008-10-28, 19:23:56

        Author         : Administrator

-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

        <head>

                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

                <title>双色表格</title>

                <script src="jquery.js" type="text/javascript"></script>

<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">



<thead>

    <tr>

        <th>姓名</th>

        <th>年龄</th>

        <th>QQ</th>

        <th>Email</th>

    </tr>

</thead>

<tbody>

    <tr>

        <td>Jerry</td>

        <td>30</td>

        <td>2551577</td>

        <td>wangjr@stditbase.com</td>

    </tr>

    <tr>

        <td>Jerry</td>

        <td>30</td>

        <td>2551577</td>

        <td>wangjr@stditbase.com</td>

    </tr>

    <tr>

        <td>Jerry</td>

        <td>30</td>

        <td>2551577</td>

        <td>wangjr@stditbase.com</td>

    </tr>

    <tr>

        <td>Jerry</td>

        <td>30</td>

        <td>2551577</td>

        <td>wangjr@stditbase.com</td>

    </tr>

    <tr>

        <td>Jerry</td>

        <td>30</td>

        <td>2551577</td>

        <td>wangjr@stditbase.com</td>

    </tr>

    <tr>

        <td>Jerry</td>

        <td>30</td>

        <td>2551577</td>

        <td>wangjr@stditbase.com</td>

    </tr>

</tbody>

</table>

</body>

</html>

效果如下：


jquery特效双色表格
11-29
jquery特效双色表格 jquery特效双色表格
使用jQuery5分钟快速搞定双色表格的简单实例
12-02
这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。 第一步：写好css。 <style type="text/css"> th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; height:30...
Jquery快速制作双色表格
Developer
03-27 201
&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双色表格
wg243964183的专栏
03-16 894
http://www.w3.org/TR/xhtml1/DTD/xhtml http://www.w3.org/1999/xhtml"> StripingTable $(document).ready(function(){ //这个就是传说的ready $(".stripe tr").mouseover(function(){ //如果鼠标移到class为strip
jQuery制作双色表格
每天进步一点点
08-26 918
Insert title here $(document).ready(function(){ $(".stripe tr").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }) $(".stripe tr:even").a
jQuery双色表格的实现
管子（zero）的杂乱空间
12-29 1722
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;// --> html xmlns="http://www.w3.o
jquery 双色表格实现代码
10-29
首先，标题提到了“双色表格实现代码”，这表明内容将涉及到通过代码来创建一个具有交替颜色行的表格。描述中提到，之前曾用JavaScript实现过类似的表格功能，但通过使用jQuery的选择器可以更为简洁和优雅地完成相同...
jQuery·双色表格
11-06
### jQuery 实现双色表格效果解析 #### 一、引言 在网页设计与开发过程中，为了提升用户体验，开发者常常需要对网页中的元素进行美化处理。其中，表格作为展示数据的一种常见方式，其美观程度直接影响到用户的阅读...
Jquery双色表格
weixin_34174132的博客
07-22 185
Jquery双色表格 Jquery代码 ： <script src="script/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#tb tbod...
JQuery制作双色表格
风华正茂
07-13 893
<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-17
双色表格，鼠标放上去北京会变化
jQuery实现表头固定表格内容滚动效果
11-02
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果
JS实现双色表格
weixin_30349597的博客
11-23 488
通过为<tr>元素添加属性或类型选择器，再通过CSS设置可以实现双色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。 原理其实很简单：利用getElementsByTagName得到所有的<tr>元素，然后分别为奇数项和偶数项的<tr>元素添加背景颜色。 核...
JQ实现双色表格
weixin_30321449的博客
12-07 387
上次用javascript实现了上色表格,见<JS实现双色表格>。但通过jQuery强大的 选择器可更加简洁，优雅的实现。 不多说了，直接给代码 代码 <html><head><title>双色表格</title><styletype="text/css...
使用jQuery5分钟快速搞定双色表格
Java高知社区
10-27 4653
先看看这个使用jQuery做的双色表格的效果： 这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。 第一步：写好css。 th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; heigh
jQuery实现动态双色表格效果
"本资源介绍了一个使用jQuery实现的双色表格（StripingTable），它通过JavaScript为HTML表格添加动态效果。当鼠标滑过表格中的行（tr）时，对应的行会改变颜色，提供更好的用户体验。以下是对关键知识点的详细解释：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值