表格隔行變色

<body><table border="0" align="center" cellspacing="1" cellpadding="0"><caption>恭喜發財</caption><thead><tr><th>代碼</th><th>名稱</th><th>最新公布凈值</th><th>累計凈值</th><th>前單位凈值</th><th>凈值增長率</th></tr></thead><tbody><tr><td>00123456</td><td>農業銀行有限公司</td><td>1075</td><td>1079</td> <td>1074</td><td>+0.047%</td></tr><tr><td>00123456</td><td>農業銀行有限公司</td><td>1075</td><td>1079</td> <td>1074</td><td>+0.047%</td></tr><tr><td>00123456</td><td>農業銀行有限公司</td><td>1075</td><td>1079</td> <td>1074</td><td>+0.047%</td></tr><tr><td>00123456</td><td>農業銀行有限公司</td><td>1075</td><td>1079</td> <td>1074</td><td>+0.047%</td></tr><tr><td>00123456</td><td>農業銀行有限公司</td><td>1075</td><td>1079</td> <td>1074</td><td>+0.047%</td></tr><tr><td>00123456</td><td>農業銀行有限公司</td><td>1075</td><td>1079</td> <td>1074</td><td>+0.047%</td></tr></tbody></table></body>

<style type="text/css">table{width: 800px;margin: 100px auto;text-align: center;border-collapse: collapse; /* border-collapse: collapse;  改變線性 */font-size: 14px;}thead tr{height: 30px;background-color: skyblue;}tbody tr{height: 30px;}tbody td{border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg{color: black;background-color: rgba(223, 189, 214,0.5);}table caption{font-weight: bold;font-size: 20px;}</style>

<script type="text/javascript">var trs = document.querySelector('tbody').querySelectorAll('tr');for (var i = 0; i < trs.length; i++) {//onmouseover 鼠標經過事件trs[i].onmouseover = function(){this.className = 'bg';}//onmouseout  鼠標離開事件trs[i].onmouseout = function(){this.className = '';}}</script>

實現效果

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248244.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248244.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248244.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！