jquery实现表格隔行换色效果
2015-11-19 10:36
921 查看
本文实例讲述了jquery实现表格隔行换色效果的代码。分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
1、新建一个web项目,jQuery;
2、在WebContent目录下新建script文件夹,将jquery-1.10.1.js复制到script中;
3、同样,新建TableColor.html;
TableColor.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表格间隔色</title> <script type="text/javascript" src="script/jquery-1.10.1.js"></script> <style type="text/css"> body { width:100%; height:100%; font-size:12px; } table { width:80%; height:90%; } .tr_odd { background: #EBF2FE; } .tr_even { background: #B4CDE6; } .tab_body { text-align: center; } </style> <script type="text/javascript"> $(function(){ $("tr:odd").addClass("tr_odd"); $("tr:even").addClass("tr_even"); }); </script> </head> <body> <table> <tr style="background: #CCCCCC;text-align: center;"> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr class="tab_body"> <td>2013060101</td> <td>张华</td> <td>23</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060102</td> <td>赵雪</td> <td>24</td> <td>女</td> </tr> <tr class="tab_body"> <td>2013060103</td> <td>孙旭</td> <td>21</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060104</td> <td>李姝</td> <td>20</td> <td>女</td> </tr> <tr class="tab_body"> <td>2013060105</td> <td>公孙旭</td> <td>22</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060106</td> <td>李枝花</td> <td>24</td> <td>女</td> </tr> <tr class="tab_body"> <td>2013060107</td> <td>魏征</td> <td>22</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060108</td> <td>施礼</td> <td>20</td> <td>女</td> </tr> <tr class="tab_body"> <td>2013060109</td> <td>王志</td> <td>23</td> <td>男</td> </tr> <tr class="tab_body"> <td>2013060104</td> <td>方小许</td> <td>20</td> <td>女</td> </tr> </table> </body> </html>
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 表格标签table深入了解
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作