原生js 和 jQuery 分别实现隔行变色（简单的方法）

最近小姐姐比较勤，给大家带来好用又简单的实现隔行变色的几种写法了。走过划过不要错过~

原生js实现隔行变色代码如下：

<script>
	var lis=true;
    var openBtn = document.getElementById("#openBtn");
    openBtn.onclick=function(){    
        var trs=document.querySelectorAll("tbody>tr")
        if(lis){
            for(let i=0;i<trs.length;i++){
                kq.innerHTML="关闭隔行变色";
                if(i % 2==0){
                    trs[i].setAttribute("class","bg1")
                }else{
                    trs[i].setAttribute("class","bg2")
                }            
                lis=false
            }
        }else{
            for( let i=0;i<trs.length;i++){
                trs[i].removeAttribute("class")
                kq.innerHTML="开启隔行变色"
                lis=true     
            }
        }
    }
</script>

    <style>
		.bg1{
                background-color:brown;
        }
        .bg2{
                background-color : grey;
        }
    </style>

jQuery实现隔行变色代码如下：

 <script>
        var data=[          //只是模拟的数据
            {"user":"liang","age":13},
            {"user":"wang","age":18},
            {"user":"zhang","age":20},
        ]
       //渲染
        function showTbody(arr){
            var str="";
            for( var i in arr ){
                var {user,age}=arr[i];
                str+=`
                <tr>
                    <td>${user}</td>
                    <td>${age}</td>
                </tr>
                `
            }
            $("#tbody").html(str);
            cssOpen(data)      //渲染时调用
        }
     //添加数据
        $("#btn").click(function(){
            var user=$("#user").val();
            var age=$("#age").val();
            data.push({user,age});
            showTbody(data)
        })
      //隔行变色
        function cssOpen(data){
            $("#openBtn").click(function(){
                $("#closeBtn").css("display","block")
                $("#openBtn").css("display","none")

                $("#tbody>tr:odd").css("background","grey")     //奇数行
                $("#tbody>tr:even").css("background","brown")   //偶数行
            })
        }
	
        $("#closeBtn").click(function(){
            $("#openBtn").css("display","block")
            $("#closeBtn").css("display","none")
            $("#tbody>tr").css("background","none")
        })
		//页面一加载时就显示
        $(function(){
            showTbody(data)
        })
    </script>

	<style>
 			#closeBtn{
            	display: none;
        	}
	</style>

小姐姐需要鼓励，走过划过不要错过，来点点赞哈~