<!DOCTYPE html><html><head><meta charset="utf-8"/><title>练习</title></head><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦