清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
<!DOCTYPE html> <html> <head> <title>register</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <link href="register.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="jslib/jquery-1.6.min.js"></script> <script> function edit(){ $('span').css('display','block'); $('.revise').css('display','block'); $("#edit").css("display","none"); $("#removeedit").css("display","block"); } function removeedit(){ $('span').css('display','none'); $('.revise').css('display','none'); $("#edit").css("display","block"); $("#removeedit").css("display","none"); } function add(){ $("tbody").append($('<tr><td>' + $("#name").val() +'</td><td>'+$("#sex").val()+'</td><td>'+$("#phone").val()+'</td><td><span>删除</span></td><td><p id="revise" class="revise">修改</p></td><td><p id ="keep">保存</p></td></tr>')); } $(function(){ $("#list").delegate("td span","click",function(e){ $(this).parents("tr").remove(); }) }) $(function(){ //让input为可编辑状态 $("#list").delegate("td #revise","click",function(a){ $(this).parents("tr").find("input").removeAttr("disabled","disabled"); $(this).css("display","none"); $(this).parents("tr").find("#keep").css("display","block"); }) $("#list").delegate("td #revise","click",function(a){ $(this).parents("tr").find("select").removeAttr("disabled","disabled"); }) $("#list").delegate("td #keep","click",function(a){ $(this).parents("tr").find("input").attr("disabled","true"); $(this).css('display','none'); }) $("#list").delegate("td #keep","click",function(a){ $(this).parents("tr").find("select").attr("disabled","true"); }) }) </script> </head> <body> <div class="content"> <table id ="list" border="0" cellpadding="0" cellspacing="0"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>手机号</th> </tr> </thead> <tbody> <tr> <td><input type="text" class="on" value="hello" disabled="true"/></td> <td> <select disabled="true"> <option>男</option> <option>女</option> </select> </td> <td><input type="text" class="on" value="18329137530" disabled="true"/></td> <td><span>删除</span></td> <td><p id="revise" class="revise">修改</p></td> <td><p id ="keep" class="keep">保存</p></td> </tr> <tr> <td><input class="on" type="text" value="hello" disabled="true"/></td> <td> <select disabled="true"> <option>男</option> <option>女</option> </select> </td> <td><input type="text" class="on" value="18329137530" disabled="true"/></td> <td><span>删除</span></td> <td><p id="revise" class="revise">修改</p></td> <td><p id ="keep" class="keep">保存</p></td> </tr> <tr> <td><input type="text" class="on" value="hello" disabled="true"/></td> <td> <select disabled="true"> <option>男</option> <option>女</option> </select> </td> <td><input type="text" class="on" value="18329137530" disabled="true"/></td> <td><span>删除</span></td> <td><p id="revise" class="revise">修改</p></td> <td><p id ="keep" class="keep">保存</p></td> </tr> </tbody> </table> <button onclick="document.getElementById('add').style.display='block'">添加</button></br> <button id="edit" onclick="edit()">编辑</button> <button id="removeedit" class = "removeedit" onclick="removeedit()">退出编辑</button> </div> <div class="add" id="add"> 姓名:<input id="name" type="text"/ value=""></br> 性别: <select id="sex"> <option>男</option> <option>女</option> </select></br> 电话: <input id = "phone" type="text"/></br> <button id = "cancel">取消</button> <button id = "confirm" onclick="add(),document.getElementById('add').style.display='none'">确定</button> </div> </body> </html>