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>
  • 相关阅读:
    恭喜,贺喜,同喜
    IIS 原理学习
    ASP.NET Ajax 学习(一)服务器端部分
    一张图片引发的血案
    poj 2828 Buy Tickets
    hdu 1556 Color the ball
    nyoj 求余数
    hdu 1358Period
    hdu 3577Fast Arrangement
    poj2752 Seek the Name, Seek the Fame
  • 原文地址:https://www.cnblogs.com/apollo1616/p/9813468.html
Copyright © 2011-2022 走看看