<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0 auto;
}
div{
width: 1200px;
text-align: center;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
var ok1 =true;
var ok2 =true;
var ok3 =true;
//姓名
$("#in1").blur(function(){
var in1 = $("#in1").val();
if(in1.length == 0){
ok1 = true;
return;
}else{
ok1 = false;
}
});
//郵箱
$("#in2").blur(function(){
var in2 = $("#in2").val();
var you = /@/;
if(!in2.match(you)){
ok2 = true;
return;
}else{
ok2 = false;
}
});
//電話
$("#in3").blur(function(){
var in3 = $("#in3").val();
if(in3.length < 8 || in3.length>11){
ok3 = true;
return;
}else{
ok3 = false;
}
});
//點擊添加按鈕
$("#in6").click(function(){
if(ok1 == false){
$("#sp1").css("color","lightblue");
$("#sp1").html("√");
}else{
$("#sp1").css("color","red");
$("#sp1").html("姓名不能爲空");
return;
}
if(ok2 == false){
$("#sp2").css("color","lightblue");
$("#sp2").html("√");
}else{
$("#sp2").css("color","red");
$("#sp2").html("郵箱格式不正確");
return;
}
if(ok3 == false){
$("#sp3").css("color","lightblue");
$("#sp3").html("√");
}else{
$("#sp3").css("color","red");
$("#sp3").html("電話長度不正確");
return;
}
//添加到表格
if(ok1 ==false && ok2 == false && ok3 == false){
//賦值
var tr = $("<tr><td>"+$("#in1").val()+"</td><td>"+$("#in2").val()+"</td><td>"+$("#in3").val()+"</td><td>"+$("#province").val()+"</td><td>"+$("#city").val()+"</td><td><a href='#' onclick='shan(this)'>Delete</a></td></tr>");
//在放入tbody中
var tab = $("#tab");
tab.append(tr);
tab[0].style.display = "block";
}
});
});
//點擊刪除
function shan(obj){
var tr=$(obj).parent().parent();
tr.remove();
}
////省市聯動
// 創建一個二維數組
var arr = new Array(2);
arr[0] = ["廣東","廣州","深圳","佛山"];
arr[1] = ["湖北","荊州","武漢","赤壁"];
function choose(val){
// 獲取city的select
var city = document.getElementById("city");
// 獲取option
var cityOp = city.getElementsByTagName("option");
// 設置可操作
city.disabled = false;
// 先刪除，後添加
for (var i = 0; i < cityOp.length; i++) {
var op = cityOp[i];
// 刪除option
city.removeChild(op);
//數組長度發生變化，需處理
i--;
}
// 遍歷
for (var i = 0; i < arr.length; i++) {
//取一維數組
var arr1 = arr[i];
//取一維數組的第一個值
var firstVal = arr1[0];
//判斷
if(firstVal == val){
//遍歷
for (var j = 1; j < arr1.length; j++) {
// 獲取城市名
var value = arr1[j];
// 創建option
var optionl = document.createElement("option");
// 創建文本
var textl = document.createTextNode(value);
// 把文本添加到標籤
optionl.appendChild(textl);
//添加到city裏面
city.appendChild(optionl);
}
}
}
}
</script>
</head>
<body>
<div>
姓名：<input id="in1" placeholder="請輸入姓名"/><span id="sp1"></span><br />
email：<input id="in2" placeholder="請輸入郵箱"/><span id="sp2"></span><br />
電話：<input id="in3" placeholder="請輸入手機號"/><span id="sp3"></span><br />
省份：<select id="province" onchange="choose(this.value)">
<option value="0">--請選擇省--</option>
<option value="廣東">廣東</option>
<option value="湖北">湖北</option>
</select> <br />
城市： <select id="city" disabled="disabled">
<option value="0">--請選擇市--</option>
</select> <br />
<input type="submit" value="添加" id="in6"/><span id="sp6"></span>
<table border="1px" id="tab" width="350px" style="margin: auto;">
<tr>
<td>姓名</td>
<td>email</td>
<td>電話</td>
<td>省份</td>
<td>城市</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
表格添加數據+二級聯動
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.