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(); // 获取学历
		}
	});

	// 创建tr
	var $tr = $("");

	// 创建td
	var $td1 = $("");
	var $td2 = $("");
	var $td3 = $("");
	var $td4 = $("");
	var $td5 = $("");
	var $td6 = $("");

	// 为td添加文本内容
	var $ipt = $("");
	$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 = $("");
	 * 
	 * 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 = $("");

					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

	
		

		
		
		

		



	

	
		

			

				用户名:
				
				

				       性别:
				
				男  
				

				女      
				

				爱好:
				
				玩游戏
				
				谈恋爱
				
				自恋
				

				学习
				

				个人介绍：
				            
				

				学历:
				
					
						小学
					
					
						初中
					
					
						高中
					
					
						职高
					
					
						大专
					
					
						其它
					
				
				


				
			

			

			
				

					

						

							

								
							
							

								用户名
							
							

								性别
							
							

								爱好
							
							

								个人介绍
							
							

								学历