DOM-表格隔行变色

表格隔行变色

当遇到很长的表格时，我们很难对准数据，看起来也比较费劲。比如当我们看到下面这张表格，数据量比较少，但是也不是很容易找到对应数据的情况，很容易将数据看串行。

当我们鼠标定位到某一行的时候会有变色的效果显示，数据看起来会更加的友好，那么就让我们实现这个功能吧。

HTML及css部分

    <style>
        table {
     
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-style: 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: green;
        }
    </style>
</head