SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JS实现控制表格样式</title>
</head>
<body>
<!--给表格一个id，JS好找到它-->
<table id="tt">
    <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>性别</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td>路人甲</td>
        <td>男</td>
        <td><a href="#">查看</a><a href="#">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>路人乙</td>
        <td>女</td>
        <td><a href="#">查看</a><a href="#">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>路人丙</td>
        <td>男</td>
        <td><a href="#">查看</a><a href="#">删除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td>路人丁</td>
        <td>女</td>
        <td><a href="#">查看</a><a href="#">删除</a></td>
    </tr>
</table>
<button onclick="biaoge()">添加表格效果</button>
<button onclick="bian()">添加边框</button>
<input type="button" value="第一行上色" onclick="yi()"/>
<button onclick="ziti()">字体变大</button>
<input type="button" value="加上背景颜色" onclick="yan()"/>
<script>
    //我们使用文档对象找到表格的id
    var tab = document.getElementById("tt");//这里我们用的是全局变量，因为它没有设在任何函数方法里

    //添加表格效果
    function biaoge(){ //这样的话就是一个函数方法,变量设在里面，就是局部变量
        tab.style.borderCollapse="collapse";  //间距
        tab.style.border="1px solid gray";  //边框
        tab.style.textAlign="center";   //内容居中
        tab.style.width="800px";        //宽度
    }
    //字体变大
    function ziti(){
        tab.style.fontSize="21px";  //字体大小设置
    }
    //添加背景颜色
    function yan(){
        for(i=2;i<tab.rows.length;i++){
            if(i%2==0){//这里的 % 号是取膜，就是i除以2要等于0则是正确的
                tab.rows[i].style.backgroundColor="yellow"; //背景色
            }
            else{//上面取膜不等于0，则运行这里的代码
                tab.rows[i].style.backgroundColor="orange";//背景色
            }
        }
    }
    //第一行上色
    function yi(){
        tab.rows[1].style.backgroundColor="lightgray";//背景色
    }
    //给每个td添加表格
    function bian(){
        //这里写的是双重循环，第一个循环，找到table下的tr，第二个循环是找到tr下的td
        for(i=0;i<tab.rows.length;i++){
            //rows是table下的tr，length则是获取长度
            for(j=0;j<4;j++){
                tab.rows[i].cells[j].style.border="1px solid gray"; //边框
            }
        }
    }
</script>
</body>
</html>