表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下:

这样看着很不方便,但是隔行换色之后非常便捷清楚。

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>使用jQuery完成表格隔行换色</title>
  6. <link rel="stylesheet" href="css/style.css" />
  7. <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
  8. <script>
  9. $(function(){
  10. $("tbody tr:even").addClass("even");//将tbody的每个tr的偶数行添加even的类,添加后相当于每个奇数行都添加<class="even">的代码,偶数行同样
  11. $("tbody tr:odd").addClass("odd");//even用来选择偶数行odd用来选择奇数行
  12.  
  13. })
  14. </script>
  15.  
  16. </head>
  17. <body>
  18. <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
  19. <thead>
  20. <tr>
  21. <th>编号</th>
  22. <th>姓名</th>
  23. <th>年龄</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <tr >
  28. <td>1</td>
  29. <td>张三</td>
  30. <td>22</td>
  31. </tr>
  32. <tr >
  33. <td>2</td>
  34. <td>李四</td>
  35. <td>25</td>
  36. </tr>
  37. <tr >
  38. <td>3</td>
  39. <td>王五</td>
  40. <td>27</td>
  41. </tr>
  42. <tr >
  43. <td>4</td>
  44. <td>赵六</td>
  45. <td>29</td>
  46. </tr>
  47. <tr >
  48. <td>5</td>
  49. <td>田七</td>
  50. <td>30</td>
  51. </tr>
  52. <tr >
  53. <td>6</td>
  54. <td>汾九</td>
  55. <td>20</td>
  56. </tr>
  57. </tbody>
  58. </table>
  59. </body>
  60. </html>

css代码如下:

  1. body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
  2. form div { margin:5px 0;}
  3. .int label { float:left; width:100px; text-align:right;}
  4. .int input { padding:1px 1px; border:1px solid #ccc;height:16px;}
  5. .sub { padding-left:100px;}
  6. .sub input { margin-right:10px; }
  7. .formtips{width: 200px;margin:2px;padding:2px;}
  8. .onError{
  9. background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
  10. padding-left:25px;
  11. }
  12. .onSuccess{
  13. background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
  14. padding-left:25px;
  15. }
  16. .high{
  17. color:red;
  18. }
  19.  
  20. div,span,p {
  21. width:140px;
  22. height:140px;
  23. margin:5px;
  24. background:#aaa;
  25. border:#000 1px solid;
  26. float:left;
  27. font-size:17px;
  28. font-family:Verdana;
  29. }
  30. div.mini {
  31. width:55px;
  32. height:55px;
  33. background-color: #aaa;
  34. font-size:12px;
  35. }
  36. div.hide {
  37. display:none;
  38. }
  39.  
  40. table { border:0;border-collapse:collapse;}
  41. td { font:normal 12px/17px Arial;padding:2px;width:100px;}
  42. th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
  43. .even { background:#FFF38F;} /* 偶数行样式*/
  44. .odd { background:#FFFFEE;} /* 奇数行样式*/
  45. .selected { background:#FF6500;color:#fff;}

正是因为有.even和.odd里面的设置,这样才能使用addClass()方法,达到隔行换色的方法。当然也可以不用addClass()方法。

另一种方法的代码:

  1. $(function(){
  2.  
  3. $("tbody tr:even").css("background-color","yellow");//注意颜色也要用分号引起来
  4. $("tbody tr:odd").css("background-color","pink");
  5. // $("tbody tr:even").addClass("even");
  6. // $("tbody tr:odd").addClass("odd");
  7.  
  8. })

表的结构不变,用css()方法可以添加属性和属性值。

jQuery_完成表格的隔行换色的更多相关文章

  1. Bootstrap3基础 table-striped 表格实现隔行换色(浅灰色与白色交替)

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

  3. 使用JS创建表格以及隔行换色(包括隔N行换色)

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  4. 模块:jquery实现表格的隔行换色

    效果图: 知识点精讲:jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行,并且索引是从0开始,即第一行为偶数: 代码实现 ...

  5. JS案例四:表格的隔行换色以及高亮显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  7. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

  8. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  9. JQuery案例一:实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. NFC读写器调试总结20191203

    以下为NFC读写器调试经验总结: 1.读写器部分,从TX1/TX2输出的13.56MHZ信号主要由L0/C0构成低通滤波器,用于滤除13.56MHZ的高次谐波,取值L0=1UH,C0=47PF时候,谐 ...

  2. [codeforces1234F]Yet Another Substring Reverse

    题目链接 大致题意为将某个子串进行翻转后,使得不包含相同字符的字符子串长度最长.只能翻转一次或零次. 设一个子串的状态为包含字符的二进制.如子串为$abacd$,则状态为$00000000000000 ...

  3. 从window 的cmd窗口中下载linux 服务器上文件

    下载linux 服务器上的文件 down.php 格式为  pscp linux服务器上用户名@linux 服务器ip  文件在windows系统上的绝对路径 如果是下载服务器上的某个目录,只要在ps ...

  4. kafka 教程(三)-远程访问

    远程连接 kafka 配置 默认的 kafka 配置是无法远程访问的,解决该问题有几个方案. 方案1 advertised.listeners=PLAINTEXT://IP:9092 注意必须是 ip ...

  5. 0-1-Tree CodeForces - 1156D (并查集)

    大意: 给定树, 边权为黑或白, 求所有有向路径条数, 满足每走过一条黑边后不会走白边. 这题比赛的时候想了个假算法, 还没发现..... 显然所求的路径要么全黑, 要么全白, 要么先全白后全黑, 所 ...

  6. docker无法删除<none>镜像

    .进入root权限 sudo su # 或 sudo -i .停止所有的container(这样才能够删除其中的images): docker stop $(docker ps -a -q) 如果想要 ...

  7. 你知道dos和cmd之间的关系以及区别吗?

    含义 dos 英文disk operation system,意思是磁盘操作系统是微软系列操作系统之一,dos是一个独立的操作系统,dos对操作人员的要求是比较高的,操作者需要记住很多的命令,并利用命 ...

  8. mysql小数和类型转换函数

    保留两位小数 SELECT ROUND( 123456789.3563898,2),TRUNCATE(123456789.3563898,2),FORMAT(123456789.3563898,2); ...

  9. oracle常用函数(1)

    oracle有很强大的函数功能,常用的字符处理函数如下: SQL> select initcap('hello') from dual;//将首字母转为大写 INITCAP('HELLO')-- ...

  10. Git命令之:git push

    保护版权:转自,http://www.yiibai.com/git/git_push.html