<!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; }</style><body><div><form name="form1" id="form1" >username:<input type="text" id="username" name='user' />mail:<input type="text" id="mail" name="user" />phone:<input type="text" id="phone" name="user" /><input type="button" value="添加" id="add" /></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">huangyanxiong</td><td align="center">huang@qq.com</td><td align="center">12345678912</td><td align="center"><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的插件方案，解决代码不能复用的问题，但是没有解决点击一次变成两次的问题*/jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); },adduser: function(){$('#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;$("input[name='user']").each(function(){td[i]="<td align='center'>"+$(this).val()+"</td>"; //专门获取属性值i++;});$('#table').append('<tr>'+td.join('')+"<td align='center'>"+editInput+' '+delInput+"</td>"+'</tr>');$('#add').delInput();$('#add').adduser();});},delInput: function(){$("input[name='delInput']").click(function(){if (confirm('确定要删除吗')) {$(this).parent().parent().remove(); //jquery最大特点可以自己删除自己};});},editInput: function (){$("input[name='editInput']").click(function(){var i=1;if ($(this).val()=='编辑') {$(this).parent().siblings().each(function(){$(this).html('<input type="text" value='+'"'+$(this).text()+'"'+'token operator">+($(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;};});}});$('#add').editInput();$('#add').delInput();$('#add').adduser();});</script></html>
打开App，阅读手记
随时随地看视频
