DOM操作之-表格隔行变色和高亮显示案例

1. 设置样式

<style>
    td{
        width: 100px;
        height: 40px;
    }
</style>

2. 搭建html, 修改样式

<table border="1" style="border-collapse: collapse;">
  <tbody id="tb">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </tbody>
</table>
<script>
    // 获取所有的行
    var trs = document.getElementsByTagName("tr");// 或使用var trs = tb.children;  //获取的是所有的子元素的节点，var tb = document.getElementsById("tb");
    
    // 1.隔行变色
    for (var i = 0; i < trs.length ; i++) {
        // 下标为偶数的行显示粉色
        // 下标为奇数的行显示灰色
        if (i % 2 == 0) {
            trs[i].style.backgroundColor = "pink";
        } else {
            trs[i].style.backgroundColor = "lightgray";
        }
        // 2.鼠标移上高亮显示，鼠标离开恢复默认
        // 全局变量
        var bgc;
        // 鼠标移上高亮显示
        trs[i].onmouseover = function () {
            // 定义变量记录 tr 原来的颜色
            bgc = this.style.backgroundColor;
            this.style.backgroundColor = "skyblue";
        };
        // 鼠标离开恢复默认
        trs[i].onmouseout = function () {
            this.style.backgroundColor = bgc;
        };
    }
</script>