zoukankan      html  css  js  c++  java
  • table表格隔行变色

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name='description' content='表格的高级应用'>
        <title>表格的高级应用</title>
        <script src="../jquery.js"></script>
        <script>
            window.onload = function () {
                var oTab = document.getElementById('tab1');
    
    
                for (var i=0; i<oTab.tBodies[0].rows.length; i++){
                    if(i%2){
                        oTab.tBodies[0].rows[i].style.background='red';
                    }else {
                        oTab.tBodies[0].rows[i].style.background='green';
                    }
                }
            }
        </script>
    </head>
    <body>
    <table id="tab1" border='1' width="500px">
        <thead>
            <tr>
                <td>ID</td>
                <td>gender</td>
                <td>name</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>male</td>
                <td>John</td>
            </tr>
            <tr>
                <td>02</td>
                <td>female</td>
                <td>Ann</td>
            </tr>
            <tr>
                <td>03</td>
                <td>female</td>
                <td>Merry</td>
            </tr>
            <tr>
                <td>04</td>
                <td>female</td>
                <td>Jessis</td>
            </tr>
            <tr>
                <td>05</td>
                <td>male</td>
                <td>Jack</td>
            </tr>
            <tr>
                <td>ID</td>
                <td></td>
                <td>Apollo</td>
            </tr>
        </tbody>
    </table>
    
    </body>
    </html>
  • 相关阅读:
    07组合,模版
    06享元、责任链
    05观察,命令
    04代理,迭代器
    03单例,策略
    02工厂,创建者
    01基础
    css随记02布局
    css随记01编辑技巧,背景与边框
    nodejs随记03
  • 原文地址:https://www.cnblogs.com/apollo1616/p/9813468.html
Copyright © 2011-2022 走看看