js---表格的隔行换色 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格的隔行换色</title>
        <script>
            
            //隔行换色
            function init(){
                //得到表格
                var tab=document.getElementById("tab");
                //动态操作每一行，得到表格中的每一行
                var rows=tab.rows;//得到所有的行,是一个对象。此处是对象
                //遍历所有的行
                for(var i=0;i<rows.length;i++)
                {
                    var row=rows[i];
                    if(i%2==0)
                      row.bgColor="red";
                    else
                      row.bgColor='yellow';
                }
            }
            
            //全选和全不选
            function checkAll(){
                var check1=document.getElementById("check1");
                //得到当前check1的状态
                var checked=check1.checked;
                var checks=document.getElementsByTagName("input");//不建议这样做
                for (var i=1;i<checks.length;i++)
                {
                    var checkchoose=checks[i];
                    checkchoose.checked=checked;
                }
            }
            
            
        </script>
    </head>
    <body onload="init()">
        <table border="2px solid" align="center" style="width: 60%;height: 50%;"id="tab">
            <tr>
                <td><input type="checkbox" name="input" id="check1" onclick="checkAll()">全选</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>专业</td>
            </tr>
            
            <tr>
                <td><input type="checkbox" name="input">num1</td>
                <td>zyz</td>
                <td>21</td>
                <td>计算机</td>
            </tr>
            
            
            <tr>
                <td><input type="checkbox" name="input">num2</td>
                <td>wj</td>
                <td>20</td>
                <td>金融</td>
            </tr>
            
            <tr>
                <td><input type="checkbox" name="input">num3</td>
                <td>xjh</td>
                <td>19</td>
                <td>机械</td>
            </tr>
            
            <tr>
                <td><input type="checkbox" name="input">num4</td>
                <td>spc</td>
                <td>21</td>
                <td>计算机</td>
            </tr>
        </table>
    </body>
</html>

 

posted @ 2019-07-17 14:52  薄眠抛却陈年事。  阅读(1042)  评论(0)  编辑  收藏  举报