原生js实现table表格的各行变色功能
生活随笔
收集整理的這篇文章主要介紹了
原生js实现table表格的各行变色功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>原生js實現各行變色</title><style>*{margin:0;padding:0;}#studentCore{width:300px;margin:0 auto;}table{border-collapse: collapse;}td,th{text-align: center;padding:3px 5px;border:1px solid #ccc;}th{background-color: lightsteelblue;}.hightLight{background-color: pink;}</style>
</head>
<body οnlοad="setTableColor()"><div id="studentCore"><table><thead><tr><th>Sname</th><th>Score</th></tr></thead><tbody><tr><td>明明</td><td>50</td></tr><tr><td>靜靜</td><td>60</td></tr><tr><td>日日</td><td>65</td></tr><tr><td>李磊</td><td>70</td></tr><tr><td>韓梅梅</td><td>75</td></tr><tr><td>楊冪</td><td>80</td></tr><tr><td>范冰冰</td><td>85</td></tr></tbody></table>
</div><script src="js/jquery-3.2.1.min.js"></script>
<!--方法一-->
<script>var data=document.getElementById("studentCore");var trs=data.querySelectorAll("tbody>tr");console.log(trs);for (var i=0;i<trs.length;i++){i%2!=0&&(trs[i].className="hightLight");}
</script>
<!--方法二-->
<script>function setTableColor() {var data=document.getElementById("studentCore");var trs=data.getElementsByTagName("tr");for(var i=0;i<trs.length;i++){var j=i+1;if(j%2==0){trs[i].style.background="pink";}else{trs[i].style.background="yellow";}}}setTableColor();
</script>
</body>
</html>
?
轉載于:https://www.cnblogs.com/yingleiming/p/7802772.html
總結
以上是生活随笔為你收集整理的原生js实现table表格的各行变色功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux tcpdump抓包，wire
- 下一篇： 小程序 数据缓存