<!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">[email protected]</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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦