zoukankan      html  css  js  c++  java
  • 表格

    
    

    1.表格里面写的时候最好把tbody加上去,因为就算不加,在控制台里面看的时候会发现其实系统自己把它给加进去了。刚刚试了一下,如果不加,也不用tBodies那么弹出来的就是Blue,也就是它把表格的页眉也算进去了。如果我自己不写tBodies但是在alert里面写上,他还是会弹出张三。所以我们自己在写的时候还是把它都写上,免得看起来混乱。tBodies.rows.cells.这三个都是是获取到的数组。cells是每一行里面所有单元格的数组。

    2.在给表格设置边框的时候是直接在table后面写border="1"里面的数字越大,边框越粗

    3.tHead和tFoot在一个表格里只有一个,在要获取thead里面的元素时还是要rows[].cells[]哪怕只有一行也要把行写上去

    4.因为tBodies是一个数组,所以在写的时候一定要把[]加上,要不然会报错

    5.这里在处理选中之前的颜色时是用的一个全局变量来保存他之前的颜色。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            #tb1{
                width: 300px;
            }
        </style>
    </head>
    <body>
    <table id="tb1" border="4">
        <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Blue</td>
            <td>33</td>
        </tr>
        <tr>
            <td>2</td>
            <td>张三</td>
            <td>23</td>
        </tr>
        <tr>
            <td>3</td>
            <td>李四</td>
            <td>41</td>
        </tr><tr>
            <td>4</td>
            <td>王四</td>
            <td>41</td>
        </tr><tr>
            <td>5</td>
            <td>李三</td>
            <td>41</td>
        </tr>
        </tbody>
    </table>
    <script>
        var oTb = document.getElementById('tb1');
    //   alert(oTb.tBodies[0].rows[1].cells[1].innerHTML);
    //    alert(oTb.tHead.rows[0].cells[1].innerHTML);
        var oldColor = '';
        for(var i=0;i<oTb.tBodies[0].rows.length;i++)
        {
    //        var oldColor =oTb.tBodies[0].rows[i].style.background;自己写在这里一直报错不知道为什么求指导
    //        var oldColor = getComputedStyle(oTb.tBodies[0].rows[i]).background;这个用法不太清楚,
            oTb.tBodies[0].rows[i].onmouseover = function ()
            {
                oldColor = this.style.background;
                this.style.background = 'green';
    
            };
            oTb.tBodies[0].rows[i].onmouseout = function ()
            {
                this.style.background = oldColor;
            };
            if(i%2)
            {
                oTb.tBodies[0].rows[i].style.background = '';
            }
            else
            {
                oTb.tBodies[0].rows[i].style.background = '#ccc';
            }
    
        }
    
    </script>
    
    </body>
    </html>
  • 相关阅读:
    纯手写F3飞控的直升机固件(2.直升机倾斜盘混控了解)
    STM32输出PWM
    使用多个交叉编译器
    内核编译报错
    mdm9607平台2.2版本 编译指令
    linux 应用编程APIS
    linux 内核API总结
    Do away with the notion of hardsect_size
    大端 小端和网络字节序说明
    TI tlv320aic3104 codec调试之路径控制
  • 原文地址:https://www.cnblogs.com/zhuni/p/4713005.html
Copyright © 2011-2022 走看看