jQuery轻松实现表格的隔行变色,点击行变色

原创 2012年03月27日 21:12:18

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>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>


</body>
</html>

 

用JQuery实现表格隔行换颜色

最近在学习Jquery,其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的,相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种:     方法一:使用CSS样式,定义两个类的样式,分别使用到...

jQuery动态生成隔行变色表格

jQuery动态生成隔行变色表格下载地址:http://download.csdn.net/detail/lypf19900912/8638743...

jQuery_review之表单中的隔行变色以及关键字高亮显示

在很多项目中,当然可以避免使用table,而使用div来替代,但是为了能够快速的交付项目,而且对网络优化以及搜索引擎没有太高的妥协的话,我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局非常适合项...
  • ziwen00
  • ziwen00
  • 2014年07月26日 10:43
  • 1593

JavaScript特效—表格隔行变色和Tab标签页

最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了很多的代码量,而且学习也不是很高。接下来给大家分享两个小的特效,表格隔行变色和Tab标签页,大家来体...

jQuery表格插件(隔行换色、划过变色、全选)

//by:xcl @2012.8 qq:80213876 ;(function ($) { $.extend({ XTableList:function(options){...

js实现表格变色点击行颜色改变

 forword http://blog.csdn.net/cai7095576/article/details/21808445 js实现表格变色点击行颜色改变 [h...

js实现表格变色点击行颜色改变

js实现表格变色点击行颜色改变 table table { border-top:1px solid black; ...

jquery 点击某行变换背景颜色,其他行还原为原来颜色

jquery 点击某行变换背景颜色,其他行还原为原来颜色 jquery click 变换
  • y_h_t
  • y_h_t
  • 2011年03月19日 08:44
  • 12821

一天搞定jQuery(二)——使用jQuery实现表格的隔行换色

还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色!现在我...

jquery实现表格中点击相应行变色功能

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除。类似于: DOCTYPE html> html lang="en" xmlns...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery轻松实现表格的隔行变色,点击行变色
举报原因:
原因补充:

(最多只允许输入30个字)