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>


jQueryMobile的(十六)单选框、复选框

radio(单选按钮) 单选按钮组和复选按钮组都是用标准的 input/label 标记书写的,但是都被样式化得更容易触摸式点击。你所看见的控件,其实是覆盖在 input 上的 labe...
  • bao990423420
  • bao990423420
  • 2013年11月02日 16:08
  • 4074

jQuery基础之表单验证

学习jquery-validate.js时的一些的记录
  • sgls652709
  • sgls652709
  • 2016年12月10日 01:23
  • 1974

JQuery datatables 将符合条件的单元格设置特殊背景,添加点击事件

项目中使用到了插件datatables,实在太强大了,有了这样的需求,需要根据数据来显示是否要更换背景,以便区别对待,datatables里面有一个属性是: aocolumndefs,里面可以获取到每...
  • omayyouhappy
  • omayyouhappy
  • 2016年10月24日 19:02
  • 3127

jquery表单Check样式

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

jQuery mobile表单样式

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

jQuery-表单样式重写

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

jQuery:属性 样式 内容;表单中实现用户密码判断登录新页面

一、概念: jQuery 是一个 JavaScript 函数库,简化了 JavaScript 编程。 二、功能: HTML 元素选取 HTML 元素操作 CSS ...
  • sxb956347789
  • sxb956347789
  • 2016年11月24日 22:37
  • 418

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

属性、表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的 $("div[title=test]")选取title属性为“test”的,jQuery中没有对getElementsBy...
  • XHQT520
  • XHQT520
  • 2016年02月12日 13:46
  • 938

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

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

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

jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作) 作者:XHQT520 属性、表单过滤器 属性过滤选择器: $...
  • nl19940914
  • nl19940914
  • 2017年06月30日 15:52
  • 100
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery表单样式
举报原因:
原因补充:

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