jQuery簡單表單判斷，獲取框中的資料動態到新增表格
阿新 • • 發佈：2019-02-05
var val = this.value;
// 遍歷並且判斷
$.each(cities, function(i, n) {
// 判斷
if(i == val) {
$(n).each(function(j, m) {
// alert(j + " " + m);
$city.append("<option>" + m + "</option>");
});
}
});
});
$("#btn").click(function(){
var $name=$("#name").val();
var $email=$("#email").val();
var $telph=$("#tel").val();
var $con=$("#province").find("option:selected").text();
alert($con);
var $city=$("#city").val();
if($name!=""){
if($email.indexOf("@")){
alert("格式要正確");
}else{
if($telph.length>=8&&$telph.length<=11){
if($con!=""){
if($city!=""){
/*建立行*/
var tr=$("<tr></tr>");
//建立列 並把獲取的值新增到列中
var td1=$("<td></td>").html($name);
var td2=$("<td></td>").html($email);
var td3=$("<td></td>").html($telph);
var td4=$("<td></td>").html($con);
var td5=$("<td></td>").html($city);
//在最後一列新增刪除按鈕
var td6=$("<td><button>刪除</button></td>")
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.append(td6);
var thb=$("#myth");
thb.append(tr);
$("td button").unbind("click");
$("td button").click(function(){
if(confirm("是否刪除當前使用者？")){
$(this).parent().parent().remove();
}
});
}else{
alert("城市不能為空");
}
}else{
alert("省份不能為空");
}
}else{
alert("電話長度8到11位");
}
}
}else{
alert("姓名不能為空");
}
});
});
</script>
</head>
<body>
<h3>新增使用者</h3>
<form>
<table border="1px">
<tr>
<td>姓名：</td>
<td><input type="text" id="name" placeholder="請輸入使用者名稱"/></td>
</tr>
<tr>
<td>email：</td>
<td><input type="text" id="email" placeholder="請輸入郵箱"/></td>
</tr>
<tr>
<td>電話：</td>
<td><input type="text" id="tel" placeholder="請輸入手機號"/></td>
</tr>
<tr>
<td>省份：</td>
<td>
<select id="province" name="province">
<option value="">-請選擇-</option>
<option value="0">浙江省</option>
<option value="1">江蘇省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
<option value="4">吉林省</option>
</select>
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="city" name="city">
<option>-請選擇-</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="新增" id="btn"/>
</td>
</tr>
</table>
</form>
<table border="1px" class="biao">
<thead>
<tr>
<td>姓名</td>
<td>email</td>
<td>電話</td>
<td>省份</td>
<td>城市</td>
<td>操作</td>
</tr>
</thead>
<tbody id="myth">
</tbody>
</table>
</body>
</html>
// 遍歷並且判斷
$.each(cities, function(i, n) {
// 判斷
if(i == val) {
$(n).each(function(j, m) {
// alert(j + " " + m);
$city.append("<option>" + m + "</option>");
});
}
});
});
$("#btn").click(function(){
var $name=$("#name").val();
var $email=$("#email").val();
var $telph=$("#tel").val();
var $con=$("#province").find("option:selected").text();
alert($con);
var $city=$("#city").val();
if($name!=""){
if($email.indexOf("@")){
alert("格式要正確");
}else{
if($telph.length>=8&&$telph.length<=11){
if($con!=""){
if($city!=""){
/*建立行*/
var tr=$("<tr></tr>");
//建立列 並把獲取的值新增到列中
var td1=$("<td></td>").html($name);
var td2=$("<td></td>").html($email);
var td3=$("<td></td>").html($telph);
var td4=$("<td></td>").html($con);
var td5=$("<td></td>").html($city);
//在最後一列新增刪除按鈕
var td6=$("<td><button>刪除</button></td>")
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.append(td6);
var thb=$("#myth");
thb.append(tr);
$("td button").unbind("click");
$("td button").click(function(){
if(confirm("是否刪除當前使用者？")){
$(this).parent().parent().remove();
}
});
}else{
alert("城市不能為空");
}
}else{
alert("省份不能為空");
}
}else{
alert("電話長度8到11位");
}
}
}else{
alert("姓名不能為空");
}
});
});
</script>
</head>
<body>
<h3>新增使用者</h3>
<form>
<table border="1px">
<tr>
<td>姓名：</td>
<td><input type="text" id="name" placeholder="請輸入使用者名稱"/></td>
</tr>
<tr>
<td>email：</td>
<td><input type="text" id="email" placeholder="請輸入郵箱"/></td>
</tr>
<tr>
<td>電話：</td>
<td><input type="text" id="tel" placeholder="請輸入手機號"/></td>
</tr>
<tr>
<td>省份：</td>
<td>
<select id="province" name="province">
<option value="">-請選擇-</option>
<option value="0">浙江省</option>
<option value="1">江蘇省</option>
<option value="2">湖北省</option>
<option value="3">河北省</option>
<option value="4">吉林省</option>
</select>
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="city" name="city">
<option>-請選擇-</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="button" value="新增" id="btn"/>
</td>
</tr>
</table>
</form>
<table border="1px" class="biao">
<thead>
<tr>
<td>姓名</td>
<td>email</td>
<td>電話</td>
<td>省份</td>
<td>城市</td>
<td>操作</td>
</tr>
</thead>
<tbody id="myth">
</tbody>
</table>
</body>
</html>