jquery表单样式

原创 2012年03月26日 19:31:51

使用jquery做的表单样式,有隔行变色、点击换色、选中换色等等

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>表单样式</title>
		<style type="text/css">
			tr.odd{background-color:#fef9ba;}
			tr.even{background-color:#edfefc;}
			tr.selected{background-color:#d7ced3;}
			tr.hover{background-color:#a54aff;}
		</style>
		
		
		<script type="text/javascript" language="JavaScript" src="../include/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" language="JavaScript">
			
			$(document).ready(function(){
				//第一种
				$("#tab_1 tr").each(function(index,domEle){					
					
					$("tr:odd").addClass("odd");
					$("tr:even").addClass("even")
					
					//单击改变颜色
					$(this).click(function(){												
						$(this).toggleClass("selected");
					});
								
				}).hover(function(){
				
					//设置新的样式
					$(this).addClass("hover");
			
				},function(){
				
					$(this).removeClass("hover");
									
				}
				);
				
				//第二种样式
				$("#tab_2 tr").each(function(index,domEle){					
					
					$("tr:odd").addClass("odd");
					$("tr:even").addClass("even")
					
					//单击改变颜色
					$("input[type=checkbox]").each(function(index,domEle){
					
					$(this).click(function(){
						
						$(this).parents("tr").toggleClass("selected");
						
					});			
				
				});	
								
				}).hover(function(){
				
					//设置新的样式
					$(this).addClass("hover");
			
				},function(){
				
					$(this).removeClass("hover");
									
				}
				);
				
							
				//第三种样式
				$("#tab_2 tr").each(function(index,domEle){					
					
					$("tr:odd").addClass("odd");
					$("tr:even").addClass("even")
					
					//单击改变颜色
					$("input[type=radio]").each(function(index,domEle){
					
					$(this).click(function(){
						
						$(this).parents("tr").toggleClass("selected");
						
					});				
				});
								
				}).hover(function(){
				
					//设置新的样式
					$(this).addClass("hover");
			
				},function(){
				
					$(this).removeClass("hover");
									
				}
				);
				
														
			});
			
		</script>
		
		
	</head>
	<body>
		单击改变颜色
		<table width="300" border="1" cellpadding="1" id="tab_1">
  <tr>
    <th>姓名</th>
    <th>手机</th>
    <th>邮箱</th>
  </tr>
  <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> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<br><br><br>

选择checkbox后改变颜色
<table width="300" border="1" cellpadding="1" id="tab_2">
  <tr>
    <th>选择</th>
    <th>姓名</th>
    <th>手机</th>
    <th>邮箱</th>
  </tr>
  <tr>
   <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
   <td><input type="checkbox" class="check"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

<br><br><br>

选择radio后改变颜色
	<table width="300" border="1" cellpadding="1" id="tab_3">
  <tr>
    <th>选择</th>
    <th>姓名</th>
    <th>手机</th>
    <th>邮箱</th>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td><input type="radio" class="ra"></td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
	
		
	</body>
</html>


相关文章推荐

jQuery mobile表单样式

  • 2012年12月16日 16:20
  • 70KB
  • 下载

jQuery-表单样式重写

  • 2009年12月31日 12:31
  • 25KB
  • 下载

jQuery编程基础精华(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

属性、表单过滤器 属性过滤选择器: $(“div[id]”)选取有id属性的 ("div[title=test]")选取title属性为“test”的,jQuery中没有对getElements...
  • SWSHBON
  • SWSHBON
  • 2016年04月29日 09:41
  • 636

jquery表单Check样式

  • 2012年06月06日 12:24
  • 280KB
  • 下载

表单边框样式

  • 2015年09月08日 14:51
  • 872B
  • 下载

HTML中表格和表单的简单构造和样式

HTML中表格和表单的简单构造和样式
  • WiniceS
  • WiniceS
  • 2017年06月08日 17:38
  • 150

css实现表单Select样式美化

  • 2011年05月19日 11:28
  • 11KB
  • 下载

文件上传表单样式

  • 2016年02月19日 16:40
  • 35KB
  • 下载

13种常用按钮、文本框、表单等CSS样式

虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果。下面一些关于按钮、文本框、表单的常用CSS样式。大家可...

比较实用的box样式表单

  • 2011年03月27日 23:52
  • 431KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery表单样式
举报原因:
原因补充:

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