<!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" /> <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">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版问题（this）：这样会造成点击一次编辑或者删除按钮会变成两次按钮，而且代码不能复用 */ /* 给添加按钮定义一个点击事件，并且获取用户值创建表格行进行存储 */ $('#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>'); $('#reset').click(); //console.info($('form[name="form1"]')); /* 为删除按钮添加点击事件并删除表格行 */ $("input[name='delInput']").click(function(){ if (confirm('确定要删除吗')) { $(this).parent().parent().remove(); //jquery最大特点可以自己删除自己 }; }); /* 为删除按钮添加点击事件并编辑和保存表格行 */ $("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; }; }); }); /* 为删除按钮添加点击事件并删除表格行 */ $("input[name='delInput']").click(function(){ if (confirm('确定要删除吗')) { $(this).parent().parent().remove(); //jquery最大特点可以自己删除自己 }; }); /* 为删除按钮添加点击事件并编辑和保存表格行 */ $("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('保存'); alert(123456); return false; }; //alert(123456); if ($(this).val()=='保存') { $(this).parent().siblings().each(function(){ $(this).text($(this).children().val()); i++; }); $(this).val('编辑'); return false; }; }); });</script></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦