jQuery（4）--实现用户的添加,删除，编辑功能
页面如下：
源码如下：
user.js
$(document).ready(function() {// 添加的操作$("#addUser").bind("click", function() {addUsers(); // 添加用户的方法});// 下面是删除的操作$("#delBtn").bind("click", function() {$("tbody input:checkbox").each(function() {if (this.checked) {$(this).parent().parent().remove();}});});// 下面实现全选功能$("#ckbAll").bind('click', function() {if (this.checked) {$("tbody input:checkbox").each(function() {this.checked = true;});} else {$("tbody input:checkbox").each(function() {this.checked = false;});}});// 编辑功能});// 添加用户的方法function addUsers() {var name = $.trim($("#uname").val());// 获取用户名var sex = "";$(":radio").each(function() {if (this.checked) {sex = $(this).val(); // 获取性别}});var favs = "";$("input[name='fav']").each(function() {if (this.checked) {favs += $(this).val() + ",";// 获取爱好}});var mself = $("#mself").val(); // 获取个人介绍var edu = "";$("#edu>option").each(function() {if (this.selected) {edu = $(this).val(); // 获取学历}});// 创建trvar $tr = $("<tr></tr>");// 创建tdvar $td1 = $("<td></td>");var $td2 = $("<td></td>");var $td3 = $("<td></td>");var $td4 = $("<td></td>");var $td5 = $("<td></td>");var $td6 = $("<td></td>");// 为td添加文本内容var $ipt = $("<input/>");$ipt.attr("type", "checkbox");$td1.append($ipt);$td2.text(name);$td3.text(sex);$td4.text(favs);$td5.text(mself);$td6.text(edu);// 把td添加到tr中 对象链式操作$tr.append($td1).append($td2).append($td3).append($td4).append($td5).append($td6);// 注册事件/* * $td2.bind("dblclick",function(){ * * var $td=$(this); * * //编辑的功能 var $input = $("<input type='text'/>"); * * var yval = $td.text(); * * $input.attr("value",yval); * * $td.html("");//清空 * * $td.append($input);//把创建的input 添加到 td中 * * $input.keyup(function(event){ var key = event.which; if(key == 13){ * $td.html($input.val()); }else if(key==27){ $td.html(yval); } }); *///var $tds = $("tr td").not($td1);// 作业：思考怎么写$tr.find("td").each(function(i) {if (i == 0) {} else {$(this).bind("dblclick", function() {var $td = $(this);//检测此td是否已经被替换了，如果被替换直接返回if($td.children("input").length>0){return false;}// 编辑的功能var $input = $("<input type='text'/>");var yval = $td.text();$input.attr("value", yval);$td.html("");// 清空$td.append($input);// 把创建的input 添加到 td中$input.keyup(function(event) {var key = event.which;if (key == 13) {$td.html($input.val());} else if (key == 27) {$td.html(yval);}});});}});$("#showUsers").append($tr);}
demo7.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>demo07.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript" src="../js/user.js"></script></head><body><div align="center"><div>用户名:<input type="text" name="uname" id="uname" value="DeepSoul" /><br /> 性别:<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <br />爱好:<input type="checkbox" name="fav" value="杀人游戏" />玩游戏<input type="checkbox" name="fav" value="谈恋爱" />谈恋爱<input type="checkbox" name="fav" value="自恋" />自恋<input type="checkbox" name="fav" value="学习" checked="checked" />学习<br />个人介绍：<textarea rows="3" cols="30" id="myself"> </textarea><br />学历:<select id="edu"><option value="小学">小学</option><option value="初中">初中</option><option value="高中">高中</option><option value="职高">职高</option><option value="大专">大专</option><option value="其它">其它</option></select><br /><br /><input type="button" value="添加用户" id="addUser" /></div><div><input type="button" value="删除所选" id="delBtn"/><table border="1px" cellpadding="0" cellspacing="0"><thead><tr><th><input type="checkbox" id="ckbAll"/></th><th>用户名</th><th>性别</th><th>爱好</th><th>个人介绍</th><th>学历</th></tr></thead><tbody id="showUsers"> </tbody></table></div></div></body></html>