jquery 版本的动态编辑表格 八
2014-03-01 16:27
363 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>练习</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
.user{
color: #DFDFDF;
}
table {
border: 1px solid black;
/*修正单元格之间的边框不能合并*/
border-collapse: collapse;
width:600px;
}
table td {
border: 1px solid black;
width: 25%;
}
table th {
border: 1px solid black;
width: 25%;
}
tbody th {
background-color: #A3BAE9;
}
.error{
border: 1px solid red;
}
.user{
color: #DFDFDF;
}
</style>
<body>
<div>
<form name="form1" id="form1" >
username:<input type="text" id="username" name='username' class="user" value="5-15数字和字母组成" />
mail:<input type="text" id="mail" name="mail" class="user" value="电子邮件/Mail" />
phone:<input type="text" id="phone" name="phone" class="user" value="电话号码/手机" />
<input type="button" value="添加" id="add" disabled="disabled" />
<input type="reset" value="重写" id="reset" />
</form>
</div>
<div style="margin-top:50px;">
<table id="table">
<tr>
<th align="center" >username</th>
<th align="center" >mail</th>
<th align="center" >phone</th>
<th align="center" >操作</th>
</tr>
<tr>
<td align="center" class="userval">huangyanxiong</td>
<td align="center" class="userval">huang@qq.com</td>
<td align="center" class="userval">12345678912</td>
<td align="center" class="userval">
<input type="button" value="编辑" name="editInput" />
<input type="button" value="删除" name="delInput" />
</td>
</tr>
<tr>
<td align="center" class="userval">huangyanxiong</td>
<td align="center" class="userval">huang@qq.com</td>
<td align="center" class="userval">12345678912</td>
<td align="center" class="userval">
<input type="button" value="编辑" name="editInput" />
<input type="button" value="删除" name="delInput" />
</td>
</tr>
<tr>
<td align="center" class="userval">huangyanxiong</td>
<td align="center" class="userval">huang@qq.com</td>
<td align="center" class="userval">12345678912</td>
<td align="center" class="userval">
<input type="button" value="编辑" name="editInput" />
<input type="button" value="删除" name="delInput" />
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
/*
1版后话:这样会存在一个问题就是表格中已经存在一些原有的表格行数据并且没有按过添加按钮时时就不能进行编辑和删除，需要对代码进行调整
2版问题：这样会造成点击一次编辑或者删除按钮会变成两次按钮，而且代码不能复用
3版(this):利用函数解决代码复用，但是jquery不支持这样做
4版使用jquery的插件方案，解决代码不能复用的问题，但是没有解决点击一次变成两次的问题
5将1234版遗留问题解决，解决方法就是 采用jquery的事件委派来解决---live();jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
6版：新增功能双击可以编辑表格失败告终，搞出一堆问题，事件委派live()的特点会将所有元素都添加上事件(jquery叫冒泡)，会冒泡到dom树的最顶层，实在太夸张了，还有最后一个问题
7版：暂时不解决6版的问题实在想不到怎么搞，完成双击编辑表格
8版：添加验证程序
*/
/*
委派点击事件给选择器匹配的编辑按钮
*/
$(document).on('click','input[name="editInput"]',function(){
var i=1;
if ($(this).val()=='编辑') {
$(this).parent().siblings().each(function(){
$(this).html('<input type="text" value='+'"'+$(this).text()+'"'+'style="border-width: 0px;width:'+($(this).width()-i)+'px;height:'+($(this).height()-5)+'px;"'+' />');
i++;
});
$(this).val('保存');
return false;
};
if ($(this).val()=='保存') {
$(this).parent().siblings().each(function(){
$(this).text($(this).children().val());
i++;
});
$(this).val('编辑');
return false;
};
});
/*
委派点击事件给选择器匹配删除按钮
*/
$(document).on('click','input[name="delInput"]',function(){
if (confirm('确定要删除吗')) {
$(this).parent().parent().remove(); //jquery最大特点可以自己删除自己
};
});
/*
给添加按钮定义一个点击事件，并且获取用户值创建表格行进行存储
*/
$('#add').click(function(){
var td=new Array();
var editInput="<input type='button' value='编辑' name='editInput'/>";
var delInput="<input type='button' value='删除' name='delInput'/>";
var i=0;
console.info($('input[class="user"]')); //把注释去掉后你将会在调试工具的控制台看到一件不可思议的事情，你会很惊讶的发现选择到的是document
$(this).prevAll().each(function(){
td[i]="<td align='center' class='userval'>"+$(this).val()+"</td>"; //专门获取属性值
i++;
$(this).addClass('user');
});
$('th[align="center"]').parent().after('<tr>'+td.join('')+"<td align='center'>"+editInput+' '+delInput+"</td>"+'</tr>');
$('#reset').click();
});
//找到所有的需要绑定事件的td并且把这些td里面含有input 元素的td排除,并且委派双击事件 find（）方法适合找个一个元素里面包含的元素
/*Uncaught Error: Syntax error, unrecognized expression: td[align="center"].not([object Object]) jquery-1.8.3.min.js:2
nt.error jquery-1.8.3.min.js:2
ut jquery-1.8.3.min.js:2
vt jquery-1.8.3.min.js:2
g.querySelectorAll.vt jquery-1.8.3.min.js:2
nt jquery-1.8.3.min.js:2
v.event.dispatch jquery-1.8.3.min.js:2
v.event.add.o.handle.u
*/
//editTd=$('td[align="center"]').not($('td[align="center"]').find('input').parent()); 当我点击这里会提示出错，如下
//error:Uncaught Error: Syntax error, unrecognized expression: td[align="center"].not([object Object]) 只能用class来取代
$(document).on('dblclick','td[class="userval"]',function(){
//这个判断是防止用户再次进行双击把值清空
if (!$(this).children().length) {
$(this).html('<input type="text" value='+'"'+$(this).text()+'"'+'style="border-width: 0px;width:'+($(this).width())+'px;height:'+($(this).height()-1)+'px;"'+' />');
$(this).children().focus();
var value=$(this).children().val();
$(this).children().val('');
$(this).children().val(value);
$(this).focusout(function(){
$(this).text($(this).children().val());
});
};
});
/*
由于jquery没有进行验证的方法就只能添加方法，为了使代码可以复用，将会使用jquery的充对象
*/
jQuery.extend({
/*
验证用户名
*/
checkUserName: function(val){
var exp=new RegExp('[a-z0-9]{5,15}','i');
return exp.test(val);
},
/*
验证电子邮件
*/
checkMail: function(val){
var exp=new RegExp('^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$','i');
return exp.test(val);
},
/*
验证电话号码
*/
checkPhone: function(val){
var exp=new RegExp('^[0-9]{11}$','i');
return exp.test(val);
},
/*
清除初始值和恢复初始值
*/
intval: function(_this,str){
var string=str;
if ($(_this).val()==string) {
$(_this).val('');
$(_this).removeClass('user');
};
$(_this).focusout(function(){
if (!$(_this).val()) {
$(_this).val(string);
$(_this).addClass('user');
};
});
},
/*
切换class
*/
switchClass: function(_this,bool){
if (!bool) {
$(_this).addClass("error");
}else{
$(_this).removeClass('error');
}
},
/*
移除disabled
*/
submitAdd: function(){
if (userbool && phonebool && mailbool) {
$('#add').removeAttr('disabled');
};
}
});
/*
验证用户名，错误把边框设置为红色
*/
$('input[name="username"]').change(function(){
userbool=jQuery.checkUserName($(this).val());
jQuery.switchClass($(this),userbool);
jQuery.submitAdd();
});
/*
验证电子邮件，错误把边框设置为红色
*/
$('input[name="mail"]').change(function(){
mailbool=jQuery.checkMail($(this).val());
jQuery.switchClass($(this),mailbool);
jQuery.submitAdd();
});
/*
验证电话号码，错误把边框设置为红色
*/
$('input[name="phone"]').change(function(){
phonebool=jQuery.checkPhone($(this).val());
jQuery.switchClass($(this),phonebool);
jQuery.submitAdd();
});
/*
初始值
*/
$('input[name="username"]').focus(function(){
var str="5-15数字和字母组成";
jQuery.intval($(this),str);
});
/*
初始值
*/
$('input[name="mail"]').focus(function(){
var str="电子邮件/Mail";
jQuery.intval($(this),str);
});
/*
初始值
*/
$('input[name="phone"]').focus(function(){
var str="电话号码/手机";
jQuery.intval($(this),str);
});
var userbool=false;
var mailbool=false;
var phonebool=false;
});
</script>
</html>本文出自 “Freax” 博客，请务必保留此出处http://freax.blog.51cto.com/6614733/1365534
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery 版本的动态编辑表格 一
- jquery 版本的动态编辑表格 二
- jquery 版本的动态编辑表格 三
- jquery 版本的动态编辑表格 四
- jquery 版本的动态编辑表格 五
- jquery 版本的动态编辑表格 六
- jquery 版本的动态编辑表格 七
- jquery实现动态表格编辑
- jquery创建可编辑的动态表格
- jQuery动态表格(转自：http://www.cnblogs.com/Zjmainstay/archive/2012/07/12/jQuery_autoAddDeleteTableTr.html)
- 在网页可编辑的表格Jquery dataTable从前台到后台完整
- jQuery(非HTML5)可编辑表格实现代码
- jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格
- BootStrap和jQuery相结合实现可编辑表格
- 可编辑的表格：jQuery+PHP+jeditable实现实时编辑表格字段内容
- javascript（jquery）实现表格的编辑以及遮罩层的实现！
- JQuery实现可以编辑的表格
- jquery media iframe 内动态显示pdf(兼容ie各个版本 ，火狐，谷歌)
- JQuery 双击动态编辑
- jQuery入门学习七：可编辑的表格