使用jQuery隔行换色效果

最新推荐文章于 2020-07-01 17:05:30 发布
最新推荐文章于 2020-07-01 17:05:30 发布
阅读量690 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lampblog/article/details/8149037
版权 
<!DOCTYPE html>
<html>
    <head>
        <title>table隔行换色例子</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#news tr:even").addClass("s_oushuhang");//偶数行的背景色
                $("#news tr:odd").addClass("s_jishuhang");//奇数行的背景色
                $(".table_gehang tr").hover(function(){$(this).addClass("s_mouseover");},
                    function(){$(this).removeClass("s_mouseover");}
                );
                //鼠标移动改变背景色 链式写法
            });
        </script>
        <style type="text/css">
            *{ margin:0; padding:0}
            .s_oushuhang { background-color:#f5f5f7; }
            .s_jishuhang { background-color:#FFFFFF; }
            .table_gehang {  
                background-color:#e3e2e2; 
                font:12px Arial, "宋体"; 
                color:#424242
            }
            .table_gehang tr.title { background: #e3e2e2; height: 28px;}
            .table_gehang tr.title td { 
                text-align:center; 
                color:#000000 !important;
                padding-left:0 !important;
            }
            .table_gehang tr { width:300px; line-height:30px; }
            .table_gehang tr td { text-align:left; padding-left:5%; _padding-left:4%;}
            .table_gehang .s_mouseover { background-color:#aabbff; color:#ff4200; }
        </style>
    </head>
    <body>
        <div>TODO write content</div>

        <table id="news" border="0" cellpadding="0" cellspacing="1" class="table_gehang" width="700">
            <tr class="title">
                <td width="120">Property Type</td>
                <td>Average Total Price</td>
                <td>Average Price/sqm</td>
                <td>Average Total Rent</td>
                <td>TitleAverage Rent/sqm/month</td>
            </tr>
            <tr>
                <td>1 Room</td>
                <td>￥1000000</td>
                <td>￥20000/sqm</td>
                <td>￥12000</td>
                <td>￥100/sqm/month</td>
            </tr>
            <tr>
                <td>1 Room</td>
                <td>￥1000000</td>
                <td>￥20000/sqm</td>
                <td>￥12000</td>
                <td>￥100/sqm/month</td>
            </tr>
            <tr>
                <td>1 Room</td>
                <td>￥1000000</td>
                <td>￥20000/sqm</td>
                <td>￥12000</td>
                <td>￥100/sqm/month</td>
            </tr>
            <tr>
                <td>1 Room</td>
                <td>￥1000000</td>
                <td>￥20000/sqm</td>
                <td>￥12000</td>
                <td>￥100/sqm/month</td>
            </tr>
        </table>
    </body>
</html>


lampblog
关注
专栏目录
jquery 隔行换色
11-12
jquery 隔行换色特效 很简单 看下代码就会了 里面有2个例子
JQuery表格的隔行换色
mqingo的博客
11-20 196
01JQuery表格的隔行换色.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;01表格的隔行换色&lt;/title&gt; &lt;script type="text/javascript" src=&q
jQuery隔行换色
ahao4311的博客
02-20 291
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
使用jQuery完成隔行换色
03-09 203
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <link rel="stylesheet" href="../css/style.css" ...
JQuery 隔行换色
七七的博客
06-14 218
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="js/jquery-3.4.1.min.js"></script> <script> //将数据奇数行背景色设置为pink，偶数行设置为yellow
jquery隔行换色效果实现方法
12-09
在本例中，我们将利用jQuery选择器和类操作方法来实现隔行换色效果。 1. **jQuery 选择器**： - `#stu` 用于选取id为"stu"的表格元素，这是一个HTML表格（`<table>`）。 - `tr:even` 和 `tr:odd` 是伪类选择器，...
jquery实现表格隔行换色效果
10-23
本文将详细介绍使用jQuery库来实现表格隔行换色效果的方法。 ### jQuery简介 jQuery是一个快速、小巧、功能丰富的JavaScript库，它封装了JavaScript常用的功能代码，提供了一种简洁的JavaScript操作方式。通过...
jQuery 隔行换色 支持键盘上下键，按Enter选定值
10-29
在这个特定的场景中，我们看到的是一个使用jQuery实现的功能，即“隔行换色”以及“支持键盘上下键和Enter选定值”。 隔行换色是一种常见的表格美化技术，通过改变奇偶行的背景色，使得表格内容更易读，提高用户...
Jquery-隔行换色
叶为正的博客
06-12 310
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>隔行换色</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript">
jquery隔行变色
qq_42309685的博客
08-15 521
隔行变色 效果如下： CSS部分 <style> ul { list-style: none; color: #fff; } ul li { margin: 5px; } </style> body部分 <script src="lib/jquery/jquery-3.4.1.min.js"></script>...
jquery 实现隔行换色
09-09
jquery 实现隔行换色 不错sd sf sdf sdf
jQuery实现隔行换色
东城庞太师
12-19 284
jQuery实现隔行换色 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.js" type="text/jav...
jquery实现隔行换色
lmw的专栏
04-23 645
$(document).ready(function(){ $("#tab tr:even").css("background","red"); $("#tab tr:odd").css("background","blue"); }); 第一行第一行 第一行第一行 第一行第一行 第一行第一行 第一行第一行
JQuery——实现隔行换色
Melonico的博客
07-01 3505
基础页面显示 页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="jquery-3.5.1.js"></script> <style> table{ margin: auto;
用简洁的jQuery方法实现隔行换色
前端岚枫
03-15 1512
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下：  隔行换色                 body,table,td, {             font-family:Arial, Helvetica, sans-serif;             font-size:12px;         }         .h
jQuery表格隔行换色
weixin_30587927的博客
07-21 263
.stripe_tb th{background:#B5CBE6; color:#039; line-height:20px; height:30px} .stripe_tb td{padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center} .stripe_tb td *...
用JQuery实现表格隔行换颜色
热门推荐
suntanyong88的专栏
09-20 2万+
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种：     方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量
jQuery隔行变色
Wangmengyao1115的博客
11-08 526
无标题文档   .one{       background:#C00;       }   .two{           background:#09F;       }   $(document).ready(function(){           $("tr:even").addClass("one");//奇数行           $("tr:od
Jquery表格样式插件：隔行换色，移动换色，点击换色实现
"这篇内容主要介绍了一个基于Jquery的表格样式增强插件，该插件实现了表格隔行换色、鼠标移动换色以及点击选中换色的功能。通过编写JQUERY插件并应用到表格元素上，可以为表格提供更丰富的视觉效果。" 在网页设计中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值