如何用jQuery操作表单和表格

 我来答
懂视生活
2023-07-27 · 百度认证:湖南福仁科技有限公司官方账号
懂视生活
向TA提问
展开全部


这次给大家带来如何用jQuery操作表单和表格以及一些其它应用,下面跟随小编,一起来看一下。
一.表单应用
一个表单有三个基本组成部分:
(1)表单标签:包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法。
(2)表单域:包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文本上传框等。
(3)表单按钮:包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上或者取消传送,还可以用来控制其他定义了处理脚本的处理工作。
1.单行文本框应用
当文本框获取焦点后它的颜色需要变化,当它失去焦点后,则要恢复为原来的样式,可以使用css中的伪类选择符来实现以上的功能,css代码如下:
input:focus ,textarea:focus{
border:1px solid #f00;
background:#fcc;}但是IE6并不支持除超链接元素之外的:hover伪类选择符,此时可以利用jQuery弥补:
.focus{
border:1px solid #f00;
background:#fcc;
}
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
});
});2.多行文本框应用
高度变化:通过“放大”和“缩小”按钮绑定单击事件,相应文本框的高度也会放大或缩小。
滚动条高度变化:通过“向上”和“向下”按钮绑定单击事件
3.复选框应用
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked',true); //复选框全选,全不选设置为false});$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
$(this).attr("checked", !$(this).attr("checked")); //反选
});
});4.下拉框应用
将左边框的选项添加给右边框:
('#add').click(function(){
var $options=$('#select1 options:selected'); //获取全部的选项
$options.appendTo('#select2'); //追加给对方})5.表单验证
验证用户名:
if($(this).is('#username')){
if(this.value==""||this.value.length<6){
var errorMsg='请输入至少6位的用户名';
$parent.append('<span clsaa="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg='输入正确';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}验证邮箱同理;
提交事件:
$('#send').click(function(){
$("form.required:input").trigger('blur');
var numError=$('form.onError').length;
if(numError){
return false;
}
alert("注册成功,密码已发到你的邮箱,请查收");
});二.表格应用
1.表格变色
普通的隔行变色:
$(function(){
$("tbody>tr:odd").addClass("odd"); //给表格中奇数行添加样式
$("tbody>tr:even").addClass("even"); //给表格中偶数行添加样式})单选框控制表格隔行高亮:
$('tbody>tr').click(function(){
$(this)
.addClass('selected') //给单击的当前行添加高亮样式
.siblings().removeClass('selected') //将兄弟行的高亮模式去掉,执行完对象变为$(this).sibling()
.end() //返回$(this)对象
.find(':radio').attr('checked',true); //将此行所在的单选框也选中});2.表格展开关闭
$(function(){
$('tr.parent').click(function(){ //获取所谓的父行
$(this)
.toggleClass("selected") //添加/删除高亮
.siblings('.child_'+this.id).toggle(); //隐藏/显示所谓的子行
}).click(); //当用户刚进入界面时默认收缩起来})3表格内容筛选
$(function(){
$("#filterName").keyup(function(){ //给文本框绑定触发事件
$("table tbody tr").hide()
.filter(":contains('"+($(this).val())+"')").show(); //根据文本框的输入筛选出行中有val值的行
});
});
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式