JQuery表格表单操作

1、多选框应用代码示例

<form action=”#” method=”post”>

你喜欢的明星是?<br />

<input type=”checkbox” name=”boxs” value=”张嘉译” id=”1″ /><label for=”1″>张嘉译</label>

<input type=”checkbox” name=”boxs” value=”周润发” id=”2″ /><label for=”2″>周润发</label>

<input type=”checkbox” name=”boxs” value=”刘亦菲” id=”3″ /><label for=”2″>刘亦菲</label>

<input type=”checkbox” name=”boxs” value=”古天乐” id=”4″ /><label for=”2″>古天乐</label>

<input type=”checkbox” name=”boxs” value=”刘德华” id=”5″ /><label for=”2″>刘德华</label><br />

<input type=”button” id=”checkall” value=”全选” />

<input type=”button” id=”checkno” value=”全不选” />

<input type=”button” id=”checkre” value=”发选” />

<input type=”button” id=”send” value=”提交” />

</form>

<script language=”javascript”>

//全选

$(“#checkall”).click(function(){

$(“[name=boxs]:checkbox”).attr(“checked”,true);//选择name=boxs并且是checkbox

});

//全不选

$(“#checkno”).click(function(){

$(“[name=boxs]:checkbox”).attr(“checked”,false);

});

//反选

$(“#checkre”).click(function(){

$(“[name=boxs]:checkbox”).each(function(){//each是对于每个匹配的元素所要执行的函数

this.checked=!this.checked;

});

});

//提交

$(“#send”).click(function(){

var str=”选中的值是:”;

$(“[name=boxs]:checkbox:checked”).each(function(){

str+=$(this).val()+”|”;

});

alert(str);

});

</script>

2、表单验证代码示例

<style>

.high{ color:red;}

.onsuccess{ color:green;}

</style>

<form action=”#” method=”post”>

<div>

用户名:<input name=”username” id=”username” class=”required” type=”text” />

</div>

<div>

邮箱:<input name=”email” id=”email” type=”text” />

</div>

<input name=”sub” id=”send” value=”提交” type=”submit” />

</form>

<script language=”javascript”>

$(“form :input.required”).each(function(){

var $required=”<strong class=’high message’>*不能为空</strong>”;

$(this).parent().append($required);

});

$(“form :input”).blur(function(){

var $par=$(this).parent();//获取到当前input所在div

//验证用户名

if($(this).is(“#username”)){

if(this.value==” || this.value.length<6){

var message=’用户名长度至少6位’;

//先去掉以前的提醒

$(“.message”).remove();

$par.append(“<span class=’high message’>”+message+”</span>”);

}else{

var message=’用户名合法’;

$(“.message”).remove();

$par.append(“<span class=’onsuccess message’>”+message+”</span>”);

}

}

//验证邮箱

if($(this).is(“#email”)){

if(this.value==”” || (this.value!=”” && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){

var message=”E-Mail地址不合法”;

$(“.message”).remove();

$par.append(“<span class=’high message’>”+message+”</span>”);

}else{

var message=”E-Mail地址正确”;

$(“.message”).remove();

$par.append(“<span class=’onsuccess message’>”+message+”</span>”);

}

}

});

//提交整体验证

$(“#send”).click(function(){

$(“form .required:input”).trigger(‘blur’);

var num=$(“form .high”).length;//错误提示都带有high类,统计这个出现的次数

if(num){

return false;

}else{

alert(“全部验证成功!”);

return true;

}

});

</script>

3、表格展开关闭代码示例:

<style>

.parent{ background:#CCC;}

.select{ background:#666;}

</style>

<table>

<thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><!–表头–>

<tbody>

<tr id=”p_1″><td colspan=”3″>新闻采集部</td></tr>

<tr class=”son_p_1″><td>张三</td><td>男</td><td>23</td></tr>

<tr class=”son_p_1″><td>赵五</td><td>女</td><td>21</td></tr>

<tr class=”son_p_1″><td>李四</td><td>男</td><td>20</td></tr>

<tr class=”son_p_1″><td>小六</td><td>男</td><td>25</td></tr>

<tr id=”p_2″><td colspan=”3″>程序技术部</td></tr>

<tr class=”son_p_2″><td>张无忌</td><td>女</td><td>21</td></tr>

<tr class=”son_p_2″><td>李云龙</td><td>男</td><td>20</td></tr>

<tr class=”son_p_2″><td>韦小宝</td><td>男</td><td>25</td></tr>

</tbody>

</table>

<script language=”javascript”>

//观察发现每一个部门中有一个唯一的id而且他们包含的元素中都是son_父元素id形式

$(function(){

$(“tr.parent”).click(function(){

$(this).toggleClass(“select”)//选中的部门加深背景

.siblings(“.son_”+this.id).toggle();

});

});

//默认关闭,只需要激活click事件

$(“tbody tr[class!=parent]”).hide();

</script>

// <![CDATA[ //观察发现每一个部门中有一个唯一的id而且他们包含的元素中都是son_父元素id形式 $(function(){ $("tr.parent").click(function(){ $(this).toggleClass("select")//选中的部门加深背景 .siblings(".son_"+this.id).toggle(); }); }); //默认关闭,只需要激活click事件 $("tbody tr[class!=parent]").hide(); // ]]&gt;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我有一个梦想

Python 项目实践一(外星人入侵小游戏)第三篇

接着上节的继续学习, 一 重构:模块game_functions 在大型项目中,经常需要在添加新代码前重构既有代码。重构旨在简化既有代码的结构,使其更容易扩展。...

2939
来自专栏xx_Cc的学习总结专栏

iOS-世界那么大,CoreLocation带你去看看

2939
来自专栏携程技术中心

干货 | React Fiber 初探

1712
来自专栏菩提树下的杨过

silverlight:RadMaskedTextBox设置MaskType="Numeric"及Mask="n"时的一个bug

telerik的控件总体来说质量还算上乘,但是偶尔也会遇一些小bug: 比如 <telerik:RadMaskedTextBox Mask="n" MaskTy...

2169
来自专栏微信公众号:Java团长

你们都在用IntelliJ IDEA吗?或许你们需要看一下这篇博文

以前一直用的elipce,如今入坑IntelliJ IDEA,没想到啊。深深的爱上了它,强大到无所不能;

1593
来自专栏有趣的django

博客园美化终极版-(自定义导航栏)----什么CSDN、简书、腾讯云专栏、个人博客和微信公众号都弱爆了

6600
来自专栏程序员的SOD蜜

“老坛泡新菜”:SOD MVVM框架,让WinForms焕发新春

火热的MVVM框架 最近几年最热门的技术之一就是前端技术了,各种前端框架,前端标准和前端设计风格层出不穷,而在众多前端框架中具有MVC,MVVM功能的框架成为耀...

3866
来自专栏Jaycekon

Phantomjs+Nodejs+Mysql数据抓取(1.数据抓取)

概要: 这篇博文主要讲一下如何使用Phantomjs进行数据抓取,这里面抓的网站是太平洋电脑网估价的内容。主要是对电脑笔记本以及他们的属性进行抓取,然后在使...

4195
来自专栏nimomeng的自我进阶

Event官方文档

当系统传递一个touch event,首先会send到一个特定的view。对于touch view来讲,这个view就是被hitTest:withEve...

1162
来自专栏iOSDevLog

更多关于CocoaScript目录

3596

扫码关注云+社区