jQuery css的隔行换色

<%@ 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>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页