<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
table tr:nth-child(odd){background-color: gainsboro;}
table tr:nth-child(even){background-color: ghostwhite;}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
//用户信息提交时触发的点击事件
$("#sub").click(function(){
//获取添加的用户信息
var name = $("#name").val();
var sex = $("#sex").val();
var birth = $("#birth").val();
var province= $("#pro").find("option:selected").text();
var city= $("#city").val();
var shengfen = [["海淀", "大兴"], ["太原", "运城"]];
//给省份选项改变的事件
$("#pro").change(function() {
//清空上次
$("#cityx").siblings().remove();
var sheng = $(this).val();//省份对应value
for(var i = 0; i < shengfen[sheng].length; i++) {
var $o = $("<option></option>");//创建option标签
$o.html(shengfen[sheng][i]);
$("#city").append($o);
}
});
//点击 添加 按钮,获得用户姓名名称,验证不为空
if(name .length<3 || name .length>30){
alert("用户姓名输入错误");
}
//验证生日不为空
else if( birth==""||birth==null ){
alert("生日输入错误");
}else{
//根据添加的信息创建表示列的双标签td(第一种方法)
var mytd1=$("<td><input type='checkbox' class='ck' name='checkbox'></td>");
var $nametd = $("<td>"+name+"</td>");
var $emailtd = $("<td>"+sex+"</td>");
var $teltd = $("<td>"+birth+"</td>");
var $pro=$("<td>"+province+"-"+city+"</td>");
var $deletetd = $("<td/>");
//创建根据用户姓名删除信息的td列超链接标签
var $Del = $("<button>"+"Delete"+"</button>");
//.prop()方法用于设置或返回当前jQuery对象所匹配的元素属性值
$Del.prop("href","deletefrom?name="+name);
//将删除的超链接标签放到“删除”列中
$deletetd.append($Del);
//根据添加的信息创建行标签tr
var $tr = $("<tr></tr>");
//把创建的列标签放到行标签tr中显示
$tr.append(mytd1).append($nametd).append($emailtd).append($teltd).append($pro).append($deletetd);
//把创建好的行标签tr放到表格主体中显示
$("#tbody").append($tr);
//通过超链接点击“删除”时,执行信息的删除方法操作
$Del.click(function(){
return deleteTr($Del);
});
//全选/反选
var flag=true;
$("#change").unbind("click").click(function(){
alert(flag);
if(flag){
$(".ck[name='checkbox']").prop("checked", true);
flag=false;
}else{
$("input[name='checkbox']").each(function(){
if($(this).prop("checked")){
$(this).removeAttr("checked");
}else{
$(this).prop("checked", true);
}
})
flag=true;
}
});
//批量删除
$("#delete").unbind("click").click(function(){
if(confirm('确定要删除所选吗?')){
var checks = $("input[name='checkbox']:checked");
if(checks.length == 0){ alert('未选中任何项!');return false;}
//将获取的值存入数组
var checkData = new Array();
checks.each(function(){
$(this).parent().parent().remove();
});
}
});
//定义删除信息方法的函数操作
function deleteTr($Del){
//找到删除的超链接对应的元素父节点的子节点,并弹出提示框
var name = $Del.parent().parent().children().eq(0).text();
//弹出“是否确认删除”的提示对话框,设置标志位flag
var flag = window.confirm("是否确认删除");
//判断标志位flag代表的情况是否正确
if(flag){
//确定删除时,就删除整行数据,表示flag为false。并弹出“用户信息已被删除”的提示
$Del.parent().parent().remove();
alert("用户已被删除");
return false;
}else{
return false;
}
}
}
})
});
</script>
</head>
<body>
<center>
<p>
姓名:<input type="text" name="name" id="name" />
性别:<select id="sex">
<option value="男" >男</option>
<option value="女" >女</option>
</select>
生日:<input type="date" id="birth" />
住址:<select id="pro">
<option value="0">北京</option>
<option value="1">山西</option>
</select>
<select id="city">
<option id="cityx">西二旗</option>
</select>
<input type="submit" value="添加" style="background-color: greenyellow;" id="sub"/>
</p>
<p style="margin-left: 500px;">
<input type="submit" value="全选/反选" id="change" style="background-color: yellow;"/>
<input type="submit" value="批量删除" id="delete" style="background-color: red;"/>
</p>
<table align="center" id="tableid" border="1px" width="400px" bordercolor="grey" cellpadding="1px" cellspacing="0px">
<thead>
<tr>
<th><input id="all" name='CheckAll' type='checkbox'></th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>住址</th>
<th>删除</th>
</tr>
</thead>
<tbody id="tbody" align="center"></tbody>
</center>
</body>
</html>