js实现表格变色

今天学习DOM了，使用dom实现表格换行变色和鼠标悬停变色

DOM对元素属性的操作
1.getAttribute
获取元素属性值

input.getAttribute('type')
1
2.setAttribute
给元素添加属性值（第一个参数是属性名，第二个参数是属性的值）必须两个参数

input.setAttribute("yes", "ok") //yes=ok
1
添加属性（一个值）

input.attributes.setNamedItem(disabled)
1
3.createAttribute
创建属性（用变量接收）

var NewAttribute = document.createAttribute('good')
input.setAttribute('good', 'ok')
1
2
4.removeAttribute
删除属性

input.getAttributeNode("type")

换行变色：

第一步使用document.getElementsByTagName获取行数数组

第二步便利行数数组，用取余的方式判断奇偶行

第三步用bgColor给表格行一个颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <table border="1" >
        <tr style="background-color: #999999;">
            <th>
                <input type="checkbox">
            </th>
            <th>商品序号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>01</td>
            <td>笔记本</td>
            <td>5000</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>01</td>
            <td>笔记本</td>
            <td>5000</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>01</td>
            <td>笔记本</td>
            <td>5000</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>01</td>
            <td>笔记本</td>
            <td>5000</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>01</td>
            <td>笔记本</td>
            <td>5000</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>01</td>
            <td>笔记本</td>
            <td>5000</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>01</td>
            <td>笔记本</td>
            <td>5000</td>
            <td>修改 删除</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>01</td>
            <td>笔记本</td>
            <td>5000</td>
            <td>修改 删除</td>
        </tr>
    </table>
    <script>
        var trs = document.getElementsByTagName("tr");
        var color ;
        for(var i = 1;i<trs.length;i++){
            if(i%2==0){
                trs[i].bgColor="red";

            }
            else{
                trs[i].bgColor="white";
            }
            
            //鼠标悬浮变色
            trs[i].onmouseover = function(){
                color = this.bgColor;
                this.bgColor="green";
            }
            trs[i].onmouseout = function(){
                this.bgColor=color;
            }
        }
      
    </script>
</body>

</html>