<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
/*box-sizing: border-box;*/
}
.box{
width: 800px;
height: 500px;
margin: 20px auto;
padding: 10px;
}
.box table:nth-child(1){
width: 780px;
margin-bottom: 5px;
}
.box table:nth-child(1) tr td{
height: 30px;
}
.box table:nth-child(1) tr td input{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td select{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td .btn{
background: #99ff00;
border-radius: 5px;
border: 1px solid #666666;
}
.box>input{
width: 70px;
height: 28px;
float: right;
border-radius: 5px;
border: 1px solid #666666;
margin-left: 30px;
margin-bottom: 5px;
}
.box>input:nth-child(3){
background: green;
}
.box>input:nth-child(2){
background: yellow;
}
.box .bg{
width: 780px;
margin-bottom: 5px;
}
注:隔行变色
background: gold;
}
.box .bg tr:nth-child(2n){
background: greenyellow;
}
</style>
<script type="text/javascript" src="../libs/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="box">
<table>
<tr>
<td>姓名:<input type="text" id="name" /></td>
<td>性别:<select id="sex"><option>男</option><option>女</option></select></td>
<td>生日:<input type="text" id="happyday" /></td>
<td>地址:
<select id="city">
<option value="0">北京</option>
<option value="1">山西</option>
</select>
<select id="addr1">
</select>
</td>
<td><input type="button" οnclick="add()" value="添加" class="btn"></td>
</tr>
</table>
<hr />
<input type="button" οnclick="delAll()" value="批量删除" />
<input type="button" οnclick="che()" value="全选/反选" />
<table border="1" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td><input type="checkbox" οnclick="cheAll()" id="che"></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//实现城市的二级联动
$(function() {
var city = $("#city").val();
var addr2 = [
["北京", "西二旗"],
["临汾", "运城", "侯马", "平遥"]
];
for(var i = 0; i < addr2[city].length; i++) {
var op = $("<option></option>");
op.text(addr2[city][i]);
$("#addr1").append(op);
}
$("#city").change(function() {
city = $(this).val();
$("#addr1").empty();
for(var i = 0; i < addr2[city].length; i++) {
var op = $("<option></option>");
op.text(addr2[city][i]);
$("#addr1").append(op);
}
});
});
//添加的点击事件
function add() {
var b1 = false;
var b2 = false;
var name = $("#name").val(); //姓名
var happyday = $("#happyday").val(); //出生日期
var sex = $("#sex").val(); //性别
var sel = $("#addr1").val(); //地址 --》市区
var cs = $("#city option:selected").html();
//2. 完成用户添加功能。用户信息要求信息校验,用户名不小于3个字符且不大于30个字符,生日非空,住址实现两级联动,住址城市默认为北京,市区默认为西二旗,当用户改变城市时市区随之联动。
if(name == "") {
b1 = false;
} else if(name.length < 3 || name.length > 30) {
b1 = false;
} else {
b1 = true;
}
//判断出生日期非空
if(happyday == "") {
b2 = false;
} else {
b2 = true;
}
//判断变量为false时弹出信息错误,否则添加数据
if(b1 == false || b2 == false) {
alert("输入信息有误!");
} else {
$(".bg").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name + "</td>" +
"<td>" + sex + "</td>" +
"<td>" + happyday + "</td>" +
"<td>" + cs + "-" + sel + "</td>" +
"<td><input type='button' οnclick='return del(this)' value='删除'></td>" +
"</tr>")
}
}
//删除时的弹窗提示
function del(p) {
var f = confirm("确认删除!!!");
if(!f) {
return;
}
p.parentNode.parentNode.remove();
}
//全选
function cheAll() {
var cek = $("#che")[0].checked();
var ck = $("input[name='ck']");
for(var i = 0; i < ck.length; i++) {
ck[i].checked = cek;
}
}
//全选反选
function che() {
var cks = document.getElementsByName("ck");
for(var i = 0; i < cks.length; i++) {
cks[i].checked = !cks[i].checked;
}
}
//批量删除
function delAll() {
var ck = $("input:checked[name='ck']");
if(ck.length == 0) {
alert("请选择,然后选择删除");
return;
}
var f = confirm("确认删除!!");
if(!f){
return;
}
for(var i = 0; i < ck.length; i++) {
ck[i].parentNode.parentNode.remove();
}
}
</script>
</html>