<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
//添加
function add () {
$("span").html("");
var name = $("#name").val();
var sex = $("#sex option:selected").text();
var meoney = $("#meoney").val();
var age = $("#age").val();
if (name.length<2||name.length>20) {
$("#yz").html("*用户名不可用");
return;
}
$("table").append("<tr><td><input type='checkbox' name='ck'/></td><td>"+name+"</td><td>"+sex+"</td><td>"+meoney+"</td><td>"+age+"</td><td><button onclick='del(this)'>删除</button></td></tr>");
}
//删除
function del (a) {
$(a).parent().parent().remove();
}
//批量删除
function delAll () {
//获取选中的
var k = $(":checked[name=ck]");
if (k.length==0) {
alert("请选择数据");
return;
}
for (var i in k) {
k[i].parentNode.parentNode.remove();
}
}
//全选
function qx (e) {
var ee = $(":input[name='ck']");
for (var i=0;i<ee.length;i++) {
ee[i].checked=e.checked;
}
}
</script>
</head>
<body>
姓名<input type="text" id="name" /><span id="yz"></span><br />
性别
<select id="sex">
<option>男</option>
<option>女</option>
</select><br />
零花钱<input type="text" id="meoney" /><br />
年龄<input type="number" id="age" /><br />
<input type="button" value="添加" onclick="add()" /><br />
<input type="button" value="批量删除" onclick="delAll()" /><br />
<div>
<table border="1px">
<tr>
<th><input type="checkbox" onchange="qx(this)" /></th>
<th>姓名</th>
<th>姓别</th>
<th>零花钱</th>
<th>年龄</th>
<th>操作</th>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
//添加
function add () {
$("span").html("");
var name = $("#name").val();
var sex = $("#sex option:selected").text();
var meoney = $("#meoney").val();
var age = $("#age").val();
if (name.length<2||name.length>20) {
$("#yz").html("*用户名不可用");
return;
}
$("table").append("<tr><td><input type='checkbox' name='ck'/></td><td>"+name+"</td><td>"+sex+"</td><td>"+meoney+"</td><td>"+age+"</td><td><button onclick='del(this)'>删除</button></td></tr>");
}
//删除
function del (a) {
$(a).parent().parent().remove();
}
//批量删除
function delAll () {
//获取选中的
var k = $(":checked[name=ck]");
if (k.length==0) {
alert("请选择数据");
return;
}
for (var i in k) {
k[i].parentNode.parentNode.remove();
}
}
//全选
function qx (e) {
var ee = $(":input[name='ck']");
for (var i=0;i<ee.length;i++) {
ee[i].checked=e.checked;
}
}
</script>
</head>
<body>
姓名<input type="text" id="name" /><span id="yz"></span><br />
性别
<select id="sex">
<option>男</option>
<option>女</option>
</select><br />
零花钱<input type="text" id="meoney" /><br />
年龄<input type="number" id="age" /><br />
<input type="button" value="添加" onclick="add()" /><br />
<input type="button" value="批量删除" onclick="delAll()" /><br />
<div>
<table border="1px">
<tr>
<th><input type="checkbox" onchange="qx(this)" /></th>
<th>姓名</th>
<th>姓别</th>
<th>零花钱</th>
<th>年龄</th>
<th>操作</th>
</tr>
</table>
</div>
</body>
</html>