<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table tr:nth-child(even){ background: #EEE;}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script>
function chan(){
$("#cityz").siblings().remove();
var shi=[["西二旗","海淀区"],["承德市","邯郸市"]];
var sheng=$("#sheng").val();
var city=$("#city");
for (var i=0;i<shi[sheng].length;i++) {
city.append("<option>"+shi[sheng][i]+"</option>");
}
}
function add () {
var uname=$("#uname").val();
var sex=$("#sex option:selected").text();
var bir=$("#bir").val();
var sheng=$("#sheng option:selected").text();
var city=$("#city option:selected").val();
if (uname.length<3 || uname.length>20 || sex=="" || bir=="" || sheng=="请选择" || city=="请选择") {
alert("输入信息有误!");
} else{
$("table").append("<tr><td><input type=\"checkbox\" name=\"ck\"/></td><td>"+uname+"</td><td>"+sex+"</td><td>"+bir+"</td><td>"+sheng+"-"+city+"</td><td><button οnclick=\"del(this)\">删除</button></td></tr>");
}
}
function del(e){
e.parentNode.parentNode.remove();
}
function delall(){
var checks=$(":checked[name=ck]");
if (checks.length==0) {
alert("请至少选择一条删除!");
return;
}
for(var i in checks){
checks[i].parentNode.parentNode.remove();
}
}
function xuan(e){
var ckss=$("input[name=ck]");
for (var i in ckss) {
ckss[i].checked=e.checked;
}
}
function xuanall(){
var ckss=$("input[name=ck]")
for(var i in ckss) {
if (ckss[i].checked==false) {
ckss[i].checked=true;
} else{
ckss[i].checked=false;
}
}
}
</script>
</head>
<body>
姓名:<input id="uname" />
性别:<select id="sex"><option>男</option><option>女</option></select>
生日:<input id="bir" type="date" />
住址:<select id="sheng" οnchange="chan()">
<option>请选择</option>
<option value="0">北京</option>
<option value="1">河北</option>
</select>
<select id="city">
<option id="cityz">请选择</option>
</select><br />
<button οnclick="add()">添加</button>
<button οnclick="xuanall()">全选/反选</button>
<button οnclick="delall()">批量删除</button>
<table width="400" cellspacing="0" border="1">
<tr style="background-color: #999999;">
<th><input type="checkbox" id="cks" οnchange="xuan(this)"/></th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>住址</th>
<th>删除 </th>
</tr>
</table>
</body>
</html>
Jquery二级联动 添加数据
最新推荐文章于 2022-12-30 17:49:39 发布