jquery隔行显示变色

最新推荐文章于 2022-04-27 19:40:20 发布
最新推荐文章于 2022-04-27 19:40:20 发布
阅读量279 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maopaihuo1/article/details/80508257
版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-3.3.1.js"></script>
        <style>
               #tab td{
                   text-align: center;
               }
        </style>
            <script language="JavaScript" src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("tr:even").css("background-color","pink");
                $("tr:odd").css("background-color","aquamarine");
                $("tr").hover(function(){
                    $(this).css("background-color","aquamarine");
                });
                $("tr:even").mouseout(function(){
                    $(this).css("background-color","bisque");
                });
                $("tr:odd").mouseout(function(){
                    $(this).css("background-color","cornflowerblue");
                });
            });
        </script>
    </head>
    <body>
       <table style="width:600px;height:300px;" border="1" cellspacing="0" id="tab">
           <tr>
               <td>Monday</td><td>语文</td><td>数学</td><td>英语</td>
           </tr>
                <tr>
               <td>Tuesday</td><td>英语</td><td>化学</td><td>数学</td>
           </tr>
                <tr>
               <td>Wednesday</td><td>英语</td><td>语文</td><td>物理</td>
           </tr>
                <tr>
               <td>Thursday</td><td>生物</td><td>化学</td><td>物理</td>
           </tr>
               <tr>
               <td>Friday</td><td>英语</td><td>化学</td><td>生物</td>
           </tr>
           <tr>
               <td>Saturday</td><td>语文</td><td>化学</td><td>生物</td>
           </tr>
           <tr>
               <td>Sunday</td><td>英语</td><td>化学</td><td>物理</td>
           </tr>
       </table>
    </body>
</html>

maopaihuo1
关注
jquery 隔行显示
weixin_33889665的博客
10-22 83
<html> <head> <style> .t{background:red;} .yes{background:yellow;} .ed{background:black;} </style> <script src="js/jquery-1.3.1.js"></scr...
jquery隔行变色
qq_42309685的博客
08-15 518
隔行变色 效果如下： 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实现隔行变色
qianzihao007
01-13 2532
简介：这里我主要用到了jQuery的两个方法odd(偶数),even(奇数) 一，html页面 <form> <div> <label>姓名</label> <input type="text" id="name"> </div> <div> <label>年龄</label>
简单实现jquery隔行变色
11-27
本文实例为大家分享了jquery隔行变色展示的具体代码，供大家参考，具体内容如下 效果图 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jquery选取商品隔行变色
09-22
"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更清晰地区分各个项目。下面将详细解释如何使用jQuery实现这一功能。 首先，我们需要理解jQuery库的...
JS与jQuery实现隔行变色的方法
10-21
总之，JavaScript和jQuery都能有效地实现隔行变色，但jQuery的简洁性和易用性使其在大多数情况下成为首选。同时，开发者应当根据项目需求和团队习惯选择最合适的实现方式，并注意保持代码的可维护性和可扩展性。
jquery实现隔行变色
不忘初心，才能始终
09-20 710
原生js var tab = document.getElementByTagName('table')[0]; var tr = tab.getElementByTagName('tr'); for(var i=0;i<tr.length;i++){ if(i%2==0){ tr[i].style.background="orange"; }else{
jquery方法的隔行变色
weixin_34384681的博客
12-10 121
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li></ul&...
jQuery写的隔行变色
jiang7701037的博客
01-24 471
效果图： 代码： Title 我是box1 我是box3 我是box2 我是box4 我是box5 我是box6 $(function () { $("div:even").css({"background-color":"yellow"}); $("div:odd").css({"b
jQuery--表格隔行变色
LHH201016的博客
07-24 562
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变色表格</title> <script src="jquery-3.6.0.js"></script> </head> <body> <table b...
JQuery隔行变色
Gybk123的博客
11-07 255
/*隔行换色*/             tr:nth-child(odd) {background-color: royalblue;}             tr:nth-child(even) {background-color: gold;}             tr:nth-child(1) {background-color: teal;}
jquery的隔行变色
m0_59776219的博客
08-05 309
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.6.0.js"></script> </head> <body> <table border="1...
jQuery隔行变色
Wangmengyao1115的博客
11-08 522
无标题文档   .one{       background:#C00;       }   .two{           background:#09F;       }   $(document).ready(function(){           $("tr:even").addClass("one");//奇数行           $("tr:od
隔行变色jquery
m0_61584839的博客
04-27 1055
1.打开Visual Studio Code，然后新建一个HTML文件 2.先输入一些样式代码 3.先写上要变色的元素内容多写几行 4.最后先导入js文件夹和设置元素的jquery代码
使用JQuery实现隔行变色
yecats的博客
05-27 469
使用JQuery实现隔行变色 body{ font-size:12px; text-align:center; } #tbStu{ width:260px; border:solid 1px #666; background-color:#eee; } #tbStu tr{ line-height:23px; } #tbStu th{ bac
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值