<!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>