zoukankan      html  css  js  c++  java
  • JQuery练习demo1(隔行变色)

    1.效果如图:

      

    2.代码:

    代码
    <!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>
    <title></title>
    <style type="text/css">
    #tb
    {
    width
    :150px;
    text-align
    :center;
    }
    .tr_color
    {
    background-color
    :#888;
    }
    </style>

    <script src="JQuery/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(
    function() {
    // var $tr = $("tr");

    // for (var i = 0; i < $tr.length; i++) {
    // if (i % 2 == 0) {
    // $tr[i].style.backgroundColor = "#888";
    // }
    // }

    $(
    "tr:even").addClass("tr_color"); //odd为奇书 even偶数
    });
    </script>
    </head>
    <body>
    <table id="tb">
    <tbody>
    <tr><td>第一行</td></tr><tr><td>第一行</td></tr>
    <tr><td>第二行</td></tr><tr><td>第二行</td></tr>
    <tr><td>第三行</td></tr><tr><td>第三行</td></tr>
    <tr><td>第四行</td></tr><tr><td>第四行</td></tr>
    <tr><td>第五行</td></tr><tr><td>第五行</td></tr>
    <tr><td>第六行</td></tr><tr><td>第六行</td></tr>
    </tbody>
    </table>
    </body>
    </html>
  • 相关阅读:
    六种简单易理解的排序算法
    leetcode-數組篇
    leetcode-字符串篇
    java8 Optional优雅非空判断
    md2all 简单实用
    zooleeper面试题
    深入理解 JVM锁 与 分布式锁
    redission 高性能分布式锁
    Java传统 定时任务
    关于Zookeeper
  • 原文地址:https://www.cnblogs.com/xqhppt/p/1733035.html
Copyright © 2011-2022 走看看