jQuery双色表格的实现

最新推荐文章于 2021-08-02 16:22:16 发布
最新推荐文章于 2021-08-02 16:22:16 发布
阅读量1.6k 收藏
点赞数
分类专栏： 网站建设 文章标签： jquery function c
<script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <title> jquery </title> 
  5. <script type="text/javascript" src="jquery.js"></script> 
  6. </head> 
  7. <body> 
  8. <script type="text/javascript"> 
  9. $(document).ready(function(){ 
  10. //jQuery ready is quicker than onload 
  11. $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");}); 
  12. $(".stripeMe tr:even").addClass("alt"); 
  13. }); 
  14. </script> 
  15. <style type="text/css"> 
  16. table.sample {}{ 
  17. border-collapse: collapse; 
  18. width: 50%; 
  19. margin: 24px; 
  20. font-size: 1.1em; 
  21. } 
  22. table.sample th {}{ 
  23. background: #3e83c9; 
  24. color: #fff; 
  25. font-weight: bold; 
  26. padding: 2px 11px; 
  27. text-align: left; 
  28. border-right: 1px solid #fff; 
  29. line-height: 1.2; 
  30. } 
  31. table.sample td {}{ 
  32. padding: 6px 11px; 
  33. border-bottom: 1px solid #95bce2; 
  34. vertical-align: top; 
  35. } 
  36. table.sample td * {}{ 
  37. padding: 6px 11px; 
  38. } 
  39. table.sample tr.alt td {}{ 
  40. background: #ecf6fc; 
  41. } 
  42. table.sample tr.over td {}{ 
  43. background: #bcd4ec; 
  44. } 
  45. </style> 
  46. <table class="stripeMe sample"> 
  47. <thead> 
  48. <tr> 
  49. <th>Lorem</th> 
  50. <th>Ipsum</th> 
  51. <th>Dolor</th> 
  52. <th>Sit</th> 
  53. <th>Amet</th> 
  54. </tr> 
  55. </thead> 
  56. <tbody> 
  57. <tr> 
  58. <td>Lorem</td> 
  59. <td>Ipsum</td> 
  60. <td>Dolor</td> 
  61. <td>Sit</td> 
  62. <td>Amet</td> 
  63. </tr> 
  64. <tr> 
  65. <td>Lorem</td> 
  66. <td>Ipsum</td> 
  67. <td>Dolor</td> 
  68. <td>Sit</td> 
  69. <td>Amet</td> 
  70. </tr> 
  71. <tr> 
  72. <td>Lorem</td> 
  73. <td>Ipsum</td> 
  74. <td>Dolor</td> 
  75. <td>Sit</td> 
  76. <td>Amet</td> 
  77. </tr> 
  78. <tr> 
  79. <td>Lorem</td> 
  80. <td>Ipsum</td> 
  81. <td>Dolor</td> 
  82. <td>Sit</td> 
  83. <td>Amet</td> 
  84. </tr> 
  85. <tr> 
  86. <td>Lorem</td> 
  87. <td>Ipsum</td> 
  88. <td>Dolor</td> 
  89. <td>Sit</td> 
  90. <td>Amet</td> 
  91. </tr> 
  92. <tr> 
  93. <td>Lorem</td> 
  94. <td>Ipsum</td> 
  95. <td>Dolor</td> 
  96. <td>Sit</td> 
  97. <td>Amet</td> 
  98. </tr> 
  99. <tr> 
  100. <td>Lorem</td> 
  101. <td>Ipsum</td> 
  102. <td>Dolor</td> 
  103. <td>Sit</td> 
  104. <td>Amet</td> 
  105. </tr> 
  106. <tr> 
  107. <td>Lorem</td> 
  108. <td>Ipsum</td> 
  109. <td>Dolor</td> 
  110. <td>Sit</td> 
  111. <td>Amet</td> 
  112. </tr> 
  113. <tr> 
  114. <td>Lorem</td> 
  115. <td>Ipsum</td> 
  116. <td>Dolor</td> 
  117. <td>Sit</td> 
  118. <td>Amet</td> 
  119. </tr> 
  120. <tr> 
  121. <td>Lorem</td> 
  122. <td>Ipsum</td> 
  123. <td>Dolor</td> 
  124. <td>Sit</td> 
  125. <td>Amet</td> 
  126. </tr> 
  127. </tbody> 
  128. </table> 
  129. </body> 
  130. </html> 

<script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

piperzero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jQuery5分钟快速搞定双色表格的简单实例
12-02
先看看这个使用jQuery做的双色表格的效果： 这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。 第一步：写好css。 <style type="text/css"> th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; height:30px; } td { padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center; } td * {
JQ实现双色表格
weixin_30321449的博客
12-07 349
上次用javascript实现了上色表格,见<JS实现双色表格>。但通过jQuery强大的 选择器可更加简洁，优雅的实现。 不多说了，直接给代码 代码 <html><head><title>双色表格</title><styletype="text/css...
JQuery实现双色表格
Feebas
11-25 1151
Document     : 双色表格         Created on : 2008-10-28, 19:23:56         Author         : Administrator -->                                         双色表格
JQuery制作双色表格
风华正茂
07-13 843
<br />  //JQUERY制作双色表格<br />    $(document).ready(function(){<br />          //$(".stripe_tb tr"):获得class属性为stripe_tb的表格后再获取属于表格的行<br />          $(".stripe_tb tr").mouseover(function(){    //为表格的行添加mouseover事件<br />              //如果鼠标移到class为stripe_tb的表格
双色表格（含页面内容查找功能）（JavaScript）
weixin_48112113的博客
08-02 1145
1. 任务要求 1）简单过滤器的使用； 2）内容过滤器的使用； 3）如何获取指定元素的值？ 4）如何设置元素的样式？ 2. 需求说明 制作显示如下图所示的页面，要求如下。 （1）当页面加载完毕时，隔行变色，颜色值如上图所示，其中标题行字体颜色为白色，首行背景颜色值为：#00a40c，偶数行颜色值为#a5e5aa。 （2）当鼠标指向某一行时，该行颜色随之改变，当离开那行时，该行颜色恢复原样。 （3）输入相应的查找内容，点击...
jquery 双色表格实现代码
10-29
上次用javascript实现了上色表格,见。但通过jQuery强大的选择器可更加简洁，优雅的实现。
jquery特效双色表格
11-29
jquery特效双色表格 jquery特效双色表格
jQuery实现表格元素动态创建功能
01-19
Jquery实现表格元素的动态创建，本质是通过构造一个Dom Node节点，并且拼接到表格的Dom树上的子叶位置。 HTML正文： 用户：<input type=text id=user/> 邮箱：<input type=text id=mail/> 手机：<...
JQuery双色表格制作
Note
10-02 208
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
Jquery双色表格
幻想樂章
08-20 147
双色表格的实现因为Jquery强大的选择器变的非常的简单。尤其是:even和:odd两个选择器。 先来个最简单的，奇数偶数行不同色。先定义一下样式。   .even{ background-color:#C0C0C0; } .odd{ background-color:#0f0f0f; }  然后初始化时候的方法。 $(document).ready(f...
jQuery·双色表格
11-06
jquery写的双色表格，鼠标滑过tr，相应tr变色
jquery入门之双色表格
08-17
双色表格，鼠标放上去北京会变化
jQuery实现表头固定表格内容滚动效果
11-02
jQuery实现表头固定表格内容滚动效果 jQuery实现表头固定表格内容滚动效果
jQuery制作双色表格
每天进步一点点
08-26 873
Insert title here $(document).ready(function(){ $(".stripe tr").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){ $(this).removeClass("over"); }) $(".stripe tr:even").a
使用jQuery5分钟快速搞定双色表格
Java高知社区
10-27 4614
先看看这个使用jQuery做的双色表格的效果： 这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。 第一步：写好css。 th { /*表头样式*/ background:#0066FF; color:#FFFFFF; line-height:20px; heigh
Jquery快速制作双色表格
Developer
03-27 157
&lt;script src="jquery-1.9.1.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $(".strip tr").mousemove(function(){$(this).
jquery 实现表格排序功能
最新发布
06-08
要使用 jQuery 实现表格排序功能，可以按照以下步骤进行： 1. 给表头添加点击事件，获取当前点击的列的索引值。 2. 根据索引值，获取该列的值并进行排序。 3. 根据排序结果，重新渲染表格。 下面是一个示例代码： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值