最近小姐姐比較勤，給大家帶來好用又簡單的實作隔行變色的幾種寫法了，走過劃過不要錯過~
原生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>
小姐姐需要鼓勵，走過劃過不要錯過，來點點贊哈~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249080.html
標籤：其他
下一篇：JavaScript詞法作用域