jQuery（四）-实现用户的添加,删除，编辑功能

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 = $("<tr></tr>");

	// 创建td
	var $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>

jQuery（四）-实现用户的添加,删除，编辑功能

相关推荐