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>

jquery表单样式相关推荐

一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
JQuery 表单验证--jquery validation
jquery validation,表单验证控件官方地址 :http://jqueryvalidation.org/ jquery表单验证默认值校验规则 jquery表单验证默认的提示 1 &l ...
jQuery 表单验证插件，jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
html表单提交前验证,jquery表单提交前实现同步验证（附代码）
jquery表单提交前实现同步验证 .int{ height: 30px; text-align: left; width: 600px; } label{ width: 200px; margin- ...
jquery 表单验证
比较好用的验证插件 <!DOCTYPE html> <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
JQuery表单的提交方式
在MVC中,jQuery表单的提交方式尤为重要,表单的提交需要视图和控制器的密切连接使用. 控制器与视图的连接.接收分为三种: 自动提交:submit , action , methion 手动提交: ...
jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
jQuery表单验证实例 / 包含用户名.密码.住址.邮箱验证如下图别忘了引入jQuery框架!!! 话不多说直接先上jQuery部分代码: <script type="text/ ...
jQuery 表单验证设置html(,jquery表单验证.html
jquery表单验证 .myform { width: 600px; margin: 50px auto 0; } .p { border: 1px #cecece solid; width: 480 ...

jquery表单样式

jquery表单样式相关推荐

最新文章

热门文章