zoukankan      html  css  js  c++  java
  • jQuery实例——表格隔行换色

    昨天学了一下JavaScript,今天看了一下jQuery,感受到了jQuery的强大。下面分别时使用JS和jQuery实现表格隔行换色功能。

    效果:

    JavaScript实现表格隔行换色:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content=" keywords" />
    <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <body>
    <style type="text/css">
    body
    {font-size:12px;text-align:center}
    #tbStu
    {width:260px;border:solid 1px #666;background-color:#eee}
    #tbStu tr
    {line-height:23px}
    #tbStu tr th
    {background-color:#ccc;color:#fff}
    #tbStu .trOdd
    {background-color:#ddd}
    </style>


    <table id="tbStu" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
    </tr>
    <!-- 奇数行 -->
    <tr>
    <td>1001</td><td>Mark</td><td>Man</td><td>990</td>
    </tr>
    <!-- 偶数行 -->
    <tr>
    <td>1003</td><td>Jeek</td><td>Woman</td><td>1200</td>
    </tr>
    <tr>
    <td>1003</td><td>Jeek</td><td>Woman</td><td>1200</td>
    </tr>
    <tbody>
    </table>
    <script type="text/javascript">
    window.onload
    =function(){
    var a=document.getElementById('tbStu');
    for(var i=0;i<a.rows.length-1;i++){
    if(i%2==0){
    a.rows[i].className
    ='trOdd';
    }
    }
    }
    </script>
    </body>
    </html>



    jQuery实现表格隔行换色:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta name="keywords" content=" keywords" />
    <meta name="description" content="description" />
    </head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <body>
    <style type="text/css">
    body
    {font-size:12px;text-align:center}
    #tbStu
    {width:260px;border:solid 1px #666;background-color:#eee}
    #tbStu tr
    {line-height:23px}
    #tbStu tr th
    {background-color:#ccc;color:#fff}
    #tbStu .trOdd
    {background-color:#ddd}
    </style>


    <table id="tbStu" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
    <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
    </tr>
    <!-- 奇数行 -->
    <tr>
    <td>1001</td><td>Mark</td><td>Man</td><td>990</td>
    </tr>
    <!-- 偶数行 -->
    <tr>
    <td>1003</td><td>Jeek</td><td>Woman</td><td>1200</td>
    </tr>
    <tr>
    <td>1003</td><td>Jeek</td><td>Woman</td><td>1200</td>
    </tr>
    <tbody>
    </table>


    <script type="text/javascript">
    $(
    function(){
    $(
    "#tbStu tr:nth-child(even)").addClass('trOdd');
    });
    </script>
    </body>
    </html>



  • 相关阅读:
    神兽保佑-代码无BUG
    HDU 1022 Train Problem I (数据结构 —— 栈)
    iOS开发
    漫谈程序猿系列:无BUG不生活
    王立平--Unity破解
    java远程调用rmi入门实例
    高仿美团iOS版,版本5.7
    JAVA日志系统
    读《互联网创业password》之随想
    解决iOS空指针数据的问题
  • 原文地址:https://www.cnblogs.com/picaso/p/2431193.html
Copyright © 2011-2022 走看看