7F

学习BLOG

jquery表单样式

使用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>


阅读更多
个人分类: ajax/jquery
上一篇小练习
下一篇jquery事件练习
想对作者说点什么? 我来说一句

jquery表单Check样式

2012年06月06日 280KB 下载

jQuery mobile表单样式

2012年12月16日 70KB 下载

jquery UI表单设计器

2014年08月30日 448KB 下载

漂亮的jquery 网页各种table 表单

2017年02月27日 9.52MB 下载

jQuery-表单样式重写

2009年12月31日 25KB 下载

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

关闭
关闭