简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

jQuery实现表格颜色交替显示的方法

来源:易贤网   阅读:1072 次  日期:2015-03-11 15:12:53

温馨提示:易贤网小编为您整理了“jQuery实现表格颜色交替显示的方法”,方便广大网友查阅!

这篇文章主要介绍了jQuery实现表格颜色交替显示的方法,涉及jQuery操作表格样式的技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jQuery实现表格颜色交替显示的方法。分享给大家供大家参考。具体实现方法如下:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<title>jQuery实现表格颜色的交替显示</title>

<script type="text/javascript" src="js/jquery1.3.2.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery(".truecolor tr:odd").addClass("color1");

jQuery(".truecolor tr:even").addClass("color2");

jQuery(".truecolor tr").hover(function(){

jQuery(this).addClass("color3")

},function(){

jQuery(this).removeClass("color3")

});

});

</script>

<style type="text/css">

.truecolor {border:1px solid #333;text-align:center;}

.truecolor th {background-color:#333; color:#FFF;}

.color1 {background-color:#DDD; color:#333;}

.color2 {background-color:#EEE; color:#333;}

.color3 {background-color:#666; color:#FFF;}

</style>

</head>

<body>

<table width="450" class="truecolor">

<thead>

<tr>

<th>博客</th>

<th>作者</th>

<th>网址</th>

</tr>

</thead>

<tbody>

<tr>

<td>风格之舞</td>

<td>火德</td>

<td>隔行换色</td>

</tr>

<tr>

<td>赵雷的博客</td>

<td>赵雷</td>

<td>新浪微博</td>

</tr>

<tr>

<td>寂寞广场</td>

<td>魏春亮</td>

<td>同学录</td>

</tr>

<tr>

<td>淘宝UED</td>

<td>淘宝</td>

<td>经常购物</td>

</tr>

</tbody>

</table>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

更多信息请查看IT技术专栏

更多信息请查看脚本栏目
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:jQuery实现个性翻牌效果导航菜单的方法
下一篇:JavaScript常用脚本汇总(二)
易贤网手机网站地址:jQuery实现表格颜色交替显示的方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!