jQuery轻松实现表格的隔行变色和点击行变色的实例代码
更新时间：2016年05月09日 15:36:02 投稿：jingxian
下面小编就为大家带来一篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用jquery设置表格样式</title>
<style>
.even{
background-color:red;
}
.odd{
background-color:green;
}
.selected{
background-color:#FF6;
}
.se{
background-color:#666;
}
</style>
<script language="javascript" src="../../include/jquery.js"></script>
<script>
$(document).ready(function(){
//隔行表色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
//点击变色
$("tr").toggle(
function(){
$(this).addClass("selected");
},function (){
$(this).removeClass("selected");
}
);
//滑动变色
$("tr").mouseover(function (){
$(this).addClass("se");
}).mouseout(function (){
$(this).removeClass("se");
});
});
</script>
</head>
<body>
<table width="500" border="1" align="center">
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
以上这篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇jquery操作ID带有变量的节点实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
第一次用JSON作为jquery异步请求的传输对象，结果在jquery请求后返回的结果是字符串还是json对象上折腾了半天。等到问题解决了，也大致明白怎么个意思了，归根结底还是对jquery对相关json对象获取的理解有所偏差。2009-07-07![jQuery 表格隔行变色代码[修正注释版]](//img.jbzj.com/images/xgimg/bcimg2.png)
代码比较精简，大家可以了解下jquery的对象控制方法2008-11-11
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
这篇文章主要是对JS和JQUERY获取页面大小,滚动条位置,元素位置的示例代码进行了介绍。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了浅析jQuery中使用$所引发的问题的相关资料,f非常不错具有参考借鉴价值，需要的朋友可以参考下2016-05-05
下面小编就为大家分享一篇jQuery 防止相同的事件快速重复触发方法。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
jquery each函数的使用频率非常高，下面给大家介绍jQuery each函数源码分析，一起看看吧2016-05-05
本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的，感兴趣的朋友可以了解下2013-12-12
13 款最热门的 jQuery 图像 360 度旋转插件推荐
这篇文章主要介绍了13 款最热门的 jQuery 图像 360 度旋转插件，非常炫酷实用，有需要的小伙伴参考下2014-12-12
Ztree是一个使用jQuery实现的JSP页面的各种功能树，本文介绍一个异步获取数据到下拉树的实现方式,感兴趣的朋友可以了解下，或许对你学习ztree有所帮助2013-02-02
![jQuery 表格隔行变色代码[修正注释版]](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论