页面如下:
源码如下:
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>