原生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+=`${user}${age}`}$("#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>

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！