使用jQuery完成表格的隔行换色（对比JavaScript）

女爷i 2022-03-25 08:48 251阅读 0赞

1、案例描述

开发中，需要表格陈列数据，数据过多不易查看，通过隔行换色进行表示。

2、jQuery代码实现

2.1、理解class操作：

addClass()  给指定标签的class属性追加样式

removeClass()  将标签指定的class属性移除

toggleClass()  切换class属性样式，没有的情况下就添加，有就删除

2.2、案例实现

//css样式
    //偶数行样式
    .even{background:#fff38f;}
    //奇数行样式
    .odd{background:ffffee;}
    
    
    
    //代码实现
    <script>
        $(function(){
            //找奇数行
            $("tbody>tr:odd").addClass("odd");
            //找偶数行
            $("tbody>tr:even").addClass("even")
        });
    </script>

3、JavaScript代码实现（做对比）

<script type="text/script">
        window.onload = function(){
            var allTr = documentgetElementByTagName("tr");
            //跳过前2行
            for(var i = 2; i < allTr.length; i++){
                //给行tr设置背景颜色，奇数行偶数行分别指定颜色
                if(i % 2 == 0){
                    allTr[i].style.backgroundColor="#fff";
                }else{
                    allTr[i].style.backgroundColor="#4e7fd1";
                }
            }
        }
    </script>

4、总结

两种方式都很好理解，就看个人习惯喜欢用哪种都是一样的效果。

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javascript知识【案例：表格隔行换色】

目录 1，案例1：表格隔行换色 2，案例2：鼠标移入粉色，移出原色【基础+】 2.1：需求说明 2.2：前置知识：鼠标移入移出事件 2.3：前置拓展知识：this关键

朴灿烈づ我的快乐病毒、/ 2023年10月01日 23:22/ 0 赞/ 12 阅读

相关 JQuery实现表格隔行换色

> 黑马网课案例使用JQuery实现表格的各行换色注意： :gt(index) 为过滤选择器，选择大于指定索引的元素 :odd奇数，:enen偶数，都是

快来打我*/ 2023年09月23日 16:29/ 0 赞/ 73 阅读

相关鼠标事件之表格隔行换色

鼠标经过离开变色案例：效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

末蓝、/ 2022年11月22日 10:13/ 0 赞/ 253 阅读

相关用jstl实现表格的隔行换色

jstl的隔行换色在tr标签的里边加上代码： <tr ${ vs.count%2==1? "style='background-color:red'" : "

淩亂°似流年/ 2022年06月08日 08:12/ 0 赞/ 409 阅读

相关 js之表格隔行换色

步骤分析：第一步：确定事件(onload)并为其绑定一个函数第二步：书写函数(获取表格) 第三步：获取tbody里面的行数第四步：对tbody里面的行进行

╰+攻爆jí腚メ/ 2022年05月31日 08:51/ 0 赞/ 284 阅读

相关隔行换色并且鼠标指向行变色的表格

一应用对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。二代码 <s

小咪咪/ 2022年05月12日 00:36/ 0 赞/ 295 阅读

相关使用jQuery完成表格隔行换色

addClass(class):为每个匹配的元素添加指定的类名。 HTML 代码: <p>Hello</p> jQuery 代码: $("p").a

绝地灬酷狼/ 2022年04月21日 22:40/ 0 赞/ 281 阅读

相关 JavaScript jQuery隔行换色

<script type="text/javascript"> $(function() { //隔行变色 $("changeColor tr:

梦里梦外;/ 2022年04月03日 05:23/ 0 赞/ 323 阅读

相关使用jQuery完成表格的隔行换色（对比JavaScript）

1、案例描述开发中，需要表格陈列数据，数据过多不易查看，通过隔行换色进行表示。 2、jQuery代码实现 2.1、理解class操作：

女爷i/ 2022年03月25日 08:48/ 0 赞/ 252 阅读

相关 jQuery中实现隔行换色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ

「爱情、让人受尽委屈。」/ 2021年09月18日 22:48/ 0 赞/ 411 阅读