html-jquery列表添加删除操作

时间:2024-03-23 07:35:43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.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>html-jquery列表添加删除操作