jQuery隔行变色

最新推荐文章于 2021-01-13 19:43:06 发布
最新推荐文章于 2021-01-13 19:43:06 发布
阅读量742 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linlin2294592017/article/details/8815942
版权
<!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>
    <title></title>
    <style type="text/css">
        .imgclass
        {
            width: 200px;
            height: 200px;
        }
        .imgclass1
        {
            width: 220px;
            height: 220px;
        }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
      

        $(function () {

         $(function () {

            $('tr:odd').css('background-color', 'red');
            $('tr:even:not(#tr1)').css('background-color', 'blue');

        })

 </script>

</head>
<body>

 <table>
        <tr id="tr1">
            <th>
                出游时间
            </th>
            <th>
                出游地
            </th>
            <th>
                出游方式
            </th>
            <th>
                预计花费
            </th>
        </tr>
        <tr>
            <td>
                元旦
            </td>
            <td>
                三亚
            </td>
            <td>
                飞机
            </td>
            <td>
                2000
            </td>
        </tr>
        <tr>
            <td>
                春节
            </td>
            <td>
                泰国
            </td>
            <td>
                飞机
            </td>
            <td>
                2500
            </td>
        </tr>
        <tr>
            <td>
                清明
            </td>
            <td>
                大唐芙蓉园
            </td>
            <td>
                火车
            </td>
            <td>
                1500
            </td>
        </tr>
        <tr>
            <td>
                五一
            </td>
            <td>
                颐和园
            </td>
            <td>
                火车
            </td>
            <td>
                100
            </td>
        </tr>
        <tr>
            <td>
                端午
            </td>
            <td>
                周庄
            </td>
            <td>
                火车
            </td>
            <td>
                1000
            </td>
        </tr>
        <tr>
            <td>
                十一
            </td>
            <td>
                满城
            </td>
            <td>
                汽车
            </td>
            <td>
                30
            </td>
        </tr>
    </table>
</body>
</html>

Dlinlin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现隔行变色
m0_53592673的博客
01-18 141
jquery实现表单动态输入 隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jq
用JQuery实现表格隔行换颜色
热门推荐
suntanyong88的专栏
09-20 2万+
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种：     方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量
jQuery实现简单隔行变色的方法
10-22
主要介绍了jQuery实现简单隔行变色的方法,涉及jQuery针对页面元素样式的相关操作技巧,需要的朋友可以参考下
jQuery实现隔行变色
qianzihao007
01-13 2520
简介：这里我主要用到了jQuery的两个方法odd(偶数),even(奇数) 一，html页面 <form> <div> <label>姓名</label> <input type="text" id="name"> </div> <div> <label>年龄</label>
jQuery实现隔行变色代码
mayanling0113的专栏
03-20 432
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 简单选择器学习 //使用jquery加载事件 $(document).ready(function (){    $("tr:even").css("background","#ffff99")
简单实现jquery隔行变色
11-27
本文实例为大家分享了jquery隔行变色展示的具体代码，供大家参考，具体内容如下 效果图 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </...
jquery选取商品隔行变色
09-22
"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更清晰地区分各个项目。下面将详细解释如何使用jQuery实现这一功能。 首先，我们需要理解jQuery库的...
jQuery隔行变色与普通JS写法的对比
10-27
普通JS写法与jQuery选择器写法,选择table的行，隔一行，选择一行，感兴趣的朋友可以参考下哈，希望对你有所帮助
jQuery实现的隔行变色功能【案例】
10-17
主要介绍了jQuery实现的隔行变色功能,结合具体实例形式分析了jQuery事件响应、元素遍历及属性动态操作相关使用技巧,需要的朋友可以参考下
JS与jQuery实现隔行变色的方法
10-21
总之，JavaScript和jQuery都能有效地实现隔行变色，但jQuery的简洁性和易用性使其在大多数情况下成为首选。同时，开发者应当根据项目需求和团队习惯选择最合适的实现方式，并注意保持代码的可维护性和可扩展性。
jQuery隔行变色实现代码
周十一的技术博客
06-08 826
body { font-size:12px;text-align:center; } #tbStu { width:260px;border:1px solid #666;background-color:#eee; } #tbStu tr { line-height:23px; } #tbStu tr th { background-color:#ccc;
jQuery选择器实现隔行变色
weixin_34220623的博客
10-25 193
<script type="text/javascript"> $(function(){ $("#tableName tr:nth-child(even)").addClass("trOdd"); }) </script> 转载于:https://www.cnblogs.com/snowhite/p/4908821.html
jQuery效果_隔行变色_jQuery操作css/属性/DOM_JSON_表单校验
qq_41541451的博客
01-10 231
2021-01-08 1、jQuery动画效果 显示与隐藏：show，hide，toggle 淡入淡出：fadeIn，fadeOut，fadeToggle；淡入指的是针对与页面入的 划入划出：slideDown，slideUp，slideToggle；划入指的是针对页面划入 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
4.使用jQuery实现隔行变色
LiGuogang
11-28 489
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;使用jQuery实现隔行变色&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; body{
小练习1：隔行变色
weixin_34293141的博客
09-21 209
第一个小练习，练习JS中比较简单的隔行变色问题，隔行变色主要通过改变li的class名称来改变各行的css属性 #div li.bg0{ background: pink; color: burlywood; } #div li.bg1{ background: orange...
JQuery入门——选择器实现隔行变色
liang408015204的专栏
01-04 1263
1、JQuery选择器继承了CSS、path语音的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。 2、JQuery选择器与JavaScript相比，具有代码简单、完善的检测机制的优势。 3、使用JQuery选择器实现隔行变色，示例代码如下：     使用JQuery实现隔行变色               body{font-siz
使用JQuery实现隔行变色的效果
wangjingjing1014的专栏
04-17 1243
$(function () {             $('tr:even').css('background-color', '#eee');  //获取img集合中所有下表为偶数的元素             $('tr:odd').css('background-color', 'yellow');             //            $('#tbStu tr:nth
jquery隔行变色
最新发布
06-20
要实现表格（通常是 `<table>`）隔行变色，你可以使用 jQuery 的 `each()` 方法结合 CSS 类选择器。以下是一个简单的示例： ```javascript $(document).ready(function() { // 获取所有的 table 行 var rows = $...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值