jQuery学习笔记 - 4 表单隔行变色

最新推荐文章于 2022-05-20 23:03:44 发布

chenzai1946

最新推荐文章于 2022-05-20 23:03:44 发布

阅读量261

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/Tsybius2014/blog/1626018

版权

我使用的jQuery版本为jquery-3.3.1.js，下载地址：https://code.jquery.com/jquery-3.3.1.js

我使用的Chrome版本为 Version 63.0.3239.132 (Official Build) (64-bit)

使用jQuery实现的表单隔行变色，参考《jQuery权威指南》P33页代码段。

<html>
  <head>
    <title>jQuery学习</title>
    <!--隔行变色-->
    <style type="text/css">
      body{font-size:12px;text-align:center}
      #tbl {width:300px;border:solid 1px #666; background-color:#eee}
      #tbl tr{line-height:23px}
      #tbl tr th{background-color:#ccc;color:#fff}
      #tbl .trOdd{background-color:#fff}
    </style>
  </head>
  <body>
    <table border="1" id="tbl">
      <tr>
        <th></th>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
        <th>第四列</th>
      </tr>
      <tr><td>第一行</td><td>A1</td><td>A2</td><td>A3</td><td>A4</td></tr>
      <tr><td>第二行</td><td>B1</td><td>B2</td><td>B3</td><td>B4</td></tr>
      <tr><td>第三行</td><td>C1</td><td>C2</td><td>C3</td><td>C4</td></tr>
      <tr><td>第四行</td><td>D1</td><td>D2</td><td>D3</td><td>D4</td></tr>
      <tr><td>第五行</td><td>E1</td><td>E2</td><td>E3</td><td>E4</td></tr>
    </table>
    <script src="jquery-3.3.1.js"></script>
    <script>

      $(function(){
          $("#tbl tr:nth-child(even)").addClass("trOdd");
      });

    </script>
  </body>
</html>

END

转载于:https://my.oschina.net/Tsybius2014/blog/1626018

chenzai1946

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记 - 4 表单隔行变色

我使用的jQuery版本为jquery-3.3.1.js，下载地址：https://code.jquery.com/jquery-3.3.1.js 我使用的Chrome版本为 Version 63.0.3239.132 (Official Build) (64-bit) 使用jQuery实...
复制链接

扫一扫