jquery实现表格隔行换色效果
更新时间：2015年11月19日 10:36:16 作者：翱翔天地
下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能，感兴趣的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
有时候在做项目时，会遇到点击按钮或者文字是，弹出一个对话框，为了方便，自己就动手写了一个这样的一个插件，方便以后使用。2012-03-03
解决jquery appaend元素中id绑定事件失效的问题
下面小编就为大家带来一篇解决jquery appaend元素中id绑定事件失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。下面通过本文给大家分享jQuery zTree 异步加载添加子节点重复问题，需要的朋友参考下吧2017-11-11
这篇文章主要为大家详细介绍了jQuery Tree Multiselect的使用方法，这个插件允许用户以树型的形式来呈现列表复选框的选择，多用于权限管理中用于分配不同的权限，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
这篇文章主要介绍了基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法的相关资料,非常具有参考借鉴价值，需要的朋友可以参考下2016-05-05
本文给大家介绍的是一种检测返回值的数据类型的方法，有需要的小伙伴可以参考下。2015-07-07
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多，最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档顺便对jQuery数组做个总结2013-11-11
以往我在使用下拉框控件老是为了样式丑陋而烦恼，现在分享这个控件，喜欢的朋友可以进行二次修改，达到你想要的效果2013-11-11
这篇文章主要介绍了Jquery如何实现Div上下移动,需要的朋友可以参考下2014-04-04
我们知道ajax本身实际上是通过XMLHttpRequest对象来异步进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以js跨域操作会被拒绝。2010-03-03
最新评论