JavaScrip 表格隔行换色效果案例_综合

利用for循环将所有的标签选中，之后使用类名属性修改背景颜色就可以了。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>table {
    width: 800px;margin: 100px auto;text-align: center;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 {
    background-color: pink;}</style>
</head><body><table><thead><tr><th>代码</th><th>名称</th><th>最新公布净值</th><th>累计净值</th><th>前单位净值</th><th>净值增长率</th></tr></thead><tbody><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr><tr><td>003526</td><td>农银金穗3个月定期开放债券</td><td>1.075</td><td>1.079</td><td>1.074</td><td>+0.047%</td></tr></tbody></table><script>// 获取元素var trs = document.querySelector('tbody').querySelectorAll('tr') ;for ( var i = 0 ; i < trs.length ; i ++ ) {
    trs[i].onmouseover = function () {
    // console.log('11');this.className = 'bg' ;}trs[i].onmouseout = function () {
    this.className = '' ;}}</script>
</body></html>