jQuery css的隔行换色

原创 2018年04月17日 08:46:52
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test.jsp' starting page</title>
    
  <script type="text/javascript" src="jquery-1.8.2.min.js"></script></head>
  <script type="text/javascript">
 //1. 编写JavaScript代码,实现隔行换色效果,表头(第一行)显示绿色(10分),奇数行显示红色(20分),偶数行显示蓝色(20分),鼠标移动到某一行,将整行显示为黄色(20分)
$(function(){
$("tr:even").css("background","red");//奇数行显示红色(20分)
$("tr:first").css("background","green");//style="background-color: green"  表头(第一行)显示绿色(10分),
$("tr:odd").css("background","blue");//偶数行显示蓝色(20分),
//鼠标移动到某一行,将整行显示为黄色(20分)
$("tr").mouseover(function(){//鼠标移上事件
$(this).css("background","yellow");
});
$("tr").mouseout(function(){//鼠标移开/离开事件
$("tr:even").css("background","red");
$("tr:first").css("background","green");//style="background-color: green"  表头(第一行)显示绿色(10分)
$("tr:odd").css("background","blue");//偶数行显示蓝色(20分),
});
});//文档预加载
  </script>
  
  
  <body>
   <!--  //创建测试页面test.jsp,在页面中设置table表格,添加若干行和列(数据可以写死) -->
   <table border="1">
    <tr >
    <td></td>
    <td>学号</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
    </tr>
    <tr>
    <td><input type="checkbox" ></td>
    <td>1</td>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
    </tr>
    <tr>
    <td><input type="checkbox"></td>
    <td>2</td>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
    </tr>
    <tr>
    <td><input type="checkbox"></td>
    <td>3</td>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
    </tr>
    <tr>
    <td><input type="checkbox"></td>
    <td>4</td>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
    </tr>
   
   </table>
   <button id="qx">全选</button>
   <button id="qbx">全不选</button>
   <button id="fx">反选</button>
  </body>
    <script type="text/javascript">
   //2. 在每行数据前加复选框,使用jQuery实现全选(10分)、全不选(10分)、反选(10分)
  $(function(){
  //全选
  $("#qx").click(function(){
  $(":checkbox").attr("checked",true);//true "checked"    checked="checked"
  });
  //全不选
  $("#qbx").click(function(){
  $(":checkbox").attr("checked",false);
  //$(":checkbox").removeAttr("checked");
  });
  //反选
  $("#fx").click(function(){
  $(":checkbox").each(function(){
  if($(this).attr("checked")){//选中
  $(this).attr("checked",false);//不选中
  }else{
  $(this).attr("checked",true);
  }
  })
  });
 
  });
  </script>
</html>

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

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

CSS 通过nth实现隔行换色

先上效果图: 实现代码: .mytable{ width:100%; border-collapse:collapse; } .mytable td{ border:1...
  • zhangfeng2124
  • zhangfeng2124
  • 2017-03-27 10:46:28
  • 243

css隔行换色和鼠标划过变色

css table隔行换色和鼠标划过变色
  • paincupid
  • paincupid
  • 2016-01-03 21:42:39
  • 1510

CSS之Table表格隔行换色之简洁版

CSS之Table表格隔行换色之简洁版
  • netuser1937
  • netuser1937
  • 2017-02-07 16:15:14
  • 427

jQuery实现隔行变色

//实现table隔行变色超级简单的代码 .one{ background:#C00; } .two{ background:#09F; } $(docu...
  • xi_weina
  • xi_weina
  • 2012-03-19 21:14:36
  • 9318

css3实现隔行换色

http://www.51xuediannao.com/qd63/index.php/page-3-35-1.html css3隔行换色测试 - 前端路上 http://www.51...
  • ForMyQianDuan
  • ForMyQianDuan
  • 2016-05-12 17:04:12
  • 556

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

  • 2017年05月10日 20:41
  • 1.38MB
  • 下载

多款jquery实现隔行换色、多选框选中变色【强大】

jquery实现隔行换色、多选框选中变色,效果还不错 多款jquery实现隔行换色、多选框选中变色 table{ border-collapse:collapse; ...
  • php_897721669
  • php_897721669
  • 2012-03-26 21:11:52
  • 1907

CSS样式定义table隔行背景颜色显示不一样(IE8及以上,其他浏览器不支持)

IE的官方blog中看到了这篇文章--《Ending Expressions》。文章指出在IE8的标准模式下,将不再对CSS expression进行支持 定义   IE5及其以后版本支持在CSS中使...
  • dongzhiquan
  • dongzhiquan
  • 2009-12-08 23:04:00
  • 2948

网页中表格隔行颜色变化 基于jquery

  • 2009年05月11日 18:41
  • 15KB
  • 下载
收藏助手
不良信息举报
您举报文章:jQuery css的隔行换色
举报原因:
原因补充:

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