js+html的增加 删除

<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>
<script src="../day05/js/jquery-1.8.2.min.js"></script>
<script>
function aa() {
var name = $("#name").val();
var sex = $("#sex option:selected").text();
var date = $("#date").val();
var pro = $("#pro option:selected").text();
var city = $("#city option:selected").text();
$("table").append("<tr><td><input type='checkbox' name='ck'></td><td>" + name + "</td><td>" + sex + "</td><td>" + date + "</td><td>" + pro + "-" + city + "</td><td><button onclick='ff(this)'>删除</button></td></tr>");
}


function ff(a) {
$(a).parent().parent().remove();
}


function ckall(e) {
var es = $(":input[name='ck']");
for(var i = 0; i < es.length; i++) {
es[i].checked = e.checked;
}
}


function quanxuan() {
var ckss = $("input[name='ck']")
for(var i in ckss) {
if(ckss[i].checked == false) {
ckss[i].checked = true;
} else {
ckss[i].checked = false;
}
}
}


function piliang() {
var checks = $(":checked[name=ck]");
if(checks.length == 0) {
alert("请至少选择一条删除!");
return;
}


for(var i in checks) {
checks[i].parentNode.parentNode.remove();
}
}


$(function() {
var shengfen = [
["海淀", "大兴"],
["邯郸", "廊坊"],
["安阳", "洛阳"]
];
$("#pro").change(function() {
$("#cityx").siblings().remove();
var sheng = $(this).val(); //省份对应value
for(var i = 0; i < shengfen[sheng].length; i++) {
var $o = $("<option></option>"); //创建option标签
$o.html(shengfen[sheng][i]);
$("#city").append($o);
}
}); 
});
</script>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>


<body style="margin: 0 auto;">
<div> 名字<input id="name"> 性别
<select id="sex">
<option>男</option>
<option>女</option>
</select> 
出生日期<input type="date" id="date">  地址
<select id="pro">
<option>---请选择省份</option>
<option value="0">北京市</option>
<option value="1">河北省</option>
<option value="2">河南省</option>
</select>
<select id="city">
<option id="cityx">---请选择城市</option>
</select>
<button onclick="aa()">添加</button><br/>                               <button onclick="quanxuan()">全选/返选</button> 
<button onclick="piliang()">批量删除</button>
</div>
<div>
<table style="padding: 1px;width: 700px;margin-top: 5px;" border="1">
<tr style="background-color: #919191;">
<td><input type="checkbox" name="chee" onchange="ckall(this)"></td>
<td>名字</td>
<td>性别</td>
<td>日期</td>
<td>地址</td>
<td>操作</td>
</tr>
</table>
</div>
</body>


</html>
阅读更多
上一篇jQuery css的隔行换色
下一篇zk2
想对作者说点什么? 我来说一句

树 状 型 菜 单 例 表

2008年10月20日 8KB 下载

JS+HTML动态生成的树

2009年08月07日 32KB 下载

经典的的JS+HTML网页效果大全

2011年10月19日 39.26MB 下载

模仿手机移动图标

2017年11月21日 1.48MB 下载

qunee网络拓扑图

2016年11月28日 144KB 下载

html5微信大转盘

2016年04月01日 48KB 下载

js省市县三级联动

2017年07月13日 24KB 下载

网页数独纯js

2017年11月26日 12KB 下载

没有更多推荐了,返回首页

关闭
关闭