Dom7 table基础

表格这么丑 还有人用吗

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        thead{
            background-color: aquamarine;
        }
        thead td{
            color: black;
            font-size: 20px;
        }
    </style>
    <script>
        window.onload = function () {
            var table = document.getElementById("table1");
            var td1 = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[1].getElementsByTagName("td")[1];

            //表格的简便操作
            var td2 = table.tBodies[0].rows[1].cells[1];

            console.log(td1.innerHTML); // cat
            console.log(td2.innerHTML); // cat
            console.log(table.rows.length); // 5 把表头也算上了
            console.log(table.tBodies[0].rows.length); // 4

            var oldColor;
            for(var i=0; i < table.tBodies[0].rows.length; i++){
                // 移入变色
                table.tBodies[0].rows[i].onmouseover = function(){
                    oldColor = this.style.background;
                    this.style.background = "red";
                }
                table.tBodies[0].rows[i].onmouseout = function(){
                    this.style.background = oldColor;
                }

                // 隔行变色
                if(i%2){
                   table.tBodies[0].rows[i].style.background = "#ccc";
                } else{
                   table.tBodies[0].rows[i].style.background = "#fff";
                }
            }
        }
    </script>
</head>
<body>
<table id="table1" border="1"  width="500">
    <!--表头-->
    <thead>
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    </thead>

    <!--内容 <tbody>最好加上 因为不写 运行的时候 审查元素的时候会发现 系统给你自动加上了tbody-->
    <tbody>
    <tr>
        <td>1</td>
        <td>jack</td>
        <td>18</td>
    </tr>
    <tr>
        <td>2</td>
        <td>cat</td>
        <td>28</td>
    </tr>
    <tr>
        <td>3</td>
        <td>lily</td>
        <td>38</td>
    </tr>
    <tr>
        <td>4</td>
        <td>tom</td>
        <td>48</td>
    </tr>

    </tbody>
</table>

</body>
</html>
QQ图片20170316104413.png

推荐阅读更多精彩内容