JQuery练习删除

来源：互联网发布：实名淘宝号购买编辑：程序博客网时间：2024/05/29 19:24

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
$(function(){
//获取到性别
$("#sex").change(function () {
var sop=$("#sex option:selected").text();
});
//获取省市
$("#province").change(function () {
var province=$(this).val();
if(province==0){
var city=$("<option selected='selected'>西二旗<option>东城</option><option>西城</option><option>崇文</option><option>宣武</option><option>朝阳</option>");
$("#city").html(city);
}
if(province==1){
var city=$("<option selected='selected'>黄浦<option>卢湾</option><option>徐家汇</option><option>普陀</option><option>虹口</option>");
$("#city").html(city);
}
if(province==2){
var city=$("<option selected='selected'>万州<option>涪陵</option><option>渝中</option><option>大渡口</option><option>江北</option>");
$("#city").html(city);
}
});

$("#tian").click(function () {
//获取到值
var name=$("#name").val();
var birth=$("#birth").val();
var flag1=false;
var flag2=false;
//判断name的信息
if(name==null||name==""){
alert("用户名不能为空");
flag1=false;
}else if(name.length<3||name.length>30){
alert("用户名输入格式有误");
flag1=false;
}else{
flag1=true;
}
//判断birth的信息
if(birth==null||birth==""){
alert("生日不能为空");
flag2=false;
}else{
flag2=true;
}
var sop=$("#sex option:selected").html();
var pro=$("#province option:selected").html();
var c=$("#city option:selected").html();
if(flag1&&flag2){
var tr =$("<tr><td><input type='checkbox' class='check'/></td><td>"+name+"</td><td>"+sop+"</td>\n" +
"<td>"+birth+"</td><td>"+pro+"-"+c+"</td><td><input type='button' class='remove' value='删除' onclick='re(this)'/></td></tr>");
$("table").append(tr);
}
}) ;

//全选框
$("#all").click(function(){
if(this.checked){
$(".check").prop("checked",true);
}else{
$(".check").prop("checked",false);
}
});
// 反选按钮
$("#qf").click(function(){
//遍历选框的默认状态
$(".check").each(function(){
//再将没选中的选中,而选中的就变为没选中的了
$(this).prop("checked",!$(this).prop("checked"));
//点击按钮时,全选框的状态
chall();
});
});
//多个选框设置点击事件
$(".check").click(function () {
chall();
});
//批量删除，点击删除，删除选中的元素
$("#removeAll").click(function(){
var tab=$("checkbox").prop("checked");
if(tab==false){
alert("没有选中数据");
}else{
var con=confirm("确定要删除么!");
if(con==true){
//data表格下有是checked且没有id属性的都删除
//移除所有被选中的input元素
$("table :checked").not("[id]").parent().parent().remove();
}
}

})
});
function chall(){
var chnum=$(".check").size();//选框的总数
//定义一个初始变量
var chk=0;
$(".check").each(function () {
if($(this).prop("checked")==true){
//遍历将数据的总数累加纪录
chk++;
}
});
if(chnum==chk){
$("#all").prop("checked",true);
}else{
$("#all").prop("checked",false);
}
}
//单行删除
function re(obj){
var con=confirm("确定要删除么!");
if(con==true){
$(obj).parent().parent().remove();
}
};
</script>
</head>
<body>
<div align="center">

姓名:<input type="text" id="name" style="width: 100px;"/> 
性别:<select id="sex">
<option >男</option>
<option >女</option>
</select> 
生日:<input type="text" id="birth" style="width: 100px;"/> 
住址:<select id="province">
<option value="0" >北京</option>
<option value="1">上海</option>
<option value="2">天津</option>
</select> 
<select id="city">
<option>西二旗</option>
<option>东城</option>
<option>西城</option>
<option>崇文</option>
<option>宣武</option>
<option>朝阳</option>
<option>丰台</option>
<option>石景山</option>
<option>海淀</option>
<option>门头沟</option>
</select> 
<button id="tian" style="background-color: greenyellow;">添加</button>
</div>

<div align="center" style="margin-top: 20px;">
<button id="qf" style="margin-left:595px; background-color: yellow;">全选/反选</button>
<button id="removeAll" style="background-color: red;">批量删除</button>
</div>
<div align="center" style="margin-top: 20px;">
<table border="1 solid #000" cellspacing="0" cellpadding="5" width="700px">
<tr style="background-color: darkgrey;">
<td><input type="checkbox" id="all"/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>删除</td>
</tr>
</table>
</div>
</body>
</html>

阅读全文

0 0