您的位置：首页 > Web前端 > JQuery

JavaScript/JQuery（添加 /删除）

2018-01-07 19:09 357 查看

<!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 onclick=\"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" onchange="chan()">
<option>请选择</option>
<option value="0">北京</option>
<option value="1">河北</option>
</select>

<select id="city">
<option id="cityz">请选择</option>
</select><br />

<button onclick="add()">添加</button>
<button onclick="xuanall()">全选/反选</button>
<button onclick="delall()">批量删除</button>

<table width="400" cellspacing="0" border="1">
<tr style="background-color: #999999;">
<th><input type="checkbox" id="cks" onchange="xuan(this)"/></th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>住址</th>
<th>删除 </th>
</tr>

</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航