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 条评论
登录 后参与评论

相关文章

来自专栏hightopo

基于 HTML5 Canvas 绘制的电信网络拓扑图

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

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

31490
来自专栏有趣的django

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

78700
来自专栏林德熙的博客

win10 uwp 萤火虫效果 安装 win2d创建界面后台的方法核心代码

本文在Nukepayload2指导下,使用他的思想用C#写出来。 本文告诉大家,如何使用 win2d 做出萤火虫效果。

14710
来自专栏进击的程序猿

Understanding PHP Generators(译)Understanding PHP Generators

为什么需要谈论Generators,作为互联网应有,更快的速度意味着更好的用户体验,而Generators则是php中解决速度和内存的杀手锏

8230
来自专栏程序员的SOD蜜

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

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

42860
来自专栏PPV课数据科学社区

【工具】EXCEL十大搞笑操作排行榜

大名鼎鼎EXCEL江湖上谁人不知,谁人不晓呀,纵使你没见过EXCEL,也见过数据在跑吧?可惜的是,经常用EXCEL表哥表妹,甚至操作六七年 的江湖老手,或多或少...

37160
来自专栏韩东吉的Unity杂货铺

零基础入门 20: UGUI DropDown

(题外话,因为这期分享中段制作之后,微信平台抽疯,Gif图无法使用,导致我不得不尝试用其他的方式来让文章看起来没那么死板,在后面的部分展示中,我插入了视频文件而...

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

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

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

23090
来自专栏前端说吧

vue-awesome-swiper - 基于vue实现h5滑动翻页效果

说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper?!

71830

扫码关注云+社区

领取腾讯云代金券