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

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、总结

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