用户表的添加/删除/全选/反选/批量删除

最新推荐文章于 2023-04-07 16:58:07 发布

哪里来的神

最新推荐文章于 2023-04-07 16:58:07 发布

阅读量609

点赞数

文章标签：用户表增加删除全选反选批量删除

本文链接：https://blog.csdn.net/Jiao_Alemon/article/details/78519404

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
			table tr:nth-child(odd){background-color: gainsboro;}
			table tr:nth-child(even){background-color: ghostwhite;}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
		<script type="text/javascript">

	$(function(){
		//用户信息提交时触发的点击事件
		$("#sub").click(function(){
		//获取添加的用户信息	
		var name = $("#name").val();
		var sex = $("#sex").val();
		var birth = $("#birth").val();
		var province=	$("#pro").find("option:selected").text();
	    var city=	$("#city").val();
		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);  
        	}  
        });  
	//点击 添加 按钮，获得用户姓名名称，验证不为空
	if(name .length<3 || name .length>30){
		alert("用户姓名输入错误");
	}
	//验证生日不为空
	else if( birth==""||birth==null ){
		alert("生日输入错误");
	}else{
		//根据添加的信息创建表示列的双标签td（第一种方法）
		var mytd1=$("<td><input type='checkbox' class='ck' name='checkbox'></td>");
		var $nametd = $("<td>"+name+"</td>");
		var $emailtd = $("<td>"+sex+"</td>");
		var $teltd = $("<td>"+birth+"</td>");
		var $pro=$("<td>"+province+"-"+city+"</td>");
		var $deletetd = $("<td/>");
		//创建根据用户姓名删除信息的td列超链接标签
		var $Del = $("<button>"+"Delete"+"</button>");
		//.prop()方法用于设置或返回当前jQuery对象所匹配的元素属性值
		$Del.prop("href","deletefrom?name="+name);
		//将删除的超链接标签放到“删除”列中
		$deletetd.append($Del);
		//根据添加的信息创建行标签tr
		var $tr = $("<tr></tr>");
		//把创建的列标签放到行标签tr中显示
		$tr.append(mytd1).append($nametd).append($emailtd).append($teltd).append($pro).append($deletetd);
		//把创建好的行标签tr放到表格主体中显示
		$("#tbody").append($tr);
		//通过超链接点击“删除”时，执行信息的删除方法操作
		$Del.click(function(){
			return deleteTr($Del);
		});
		//全选/反选
		var flag=true;
    	$("#change").unbind("click").click(function(){
    	alert(flag);
    	if(flag){
            $(".ck[name='checkbox']").prop("checked", true);
            flag=false;
        }else{
             	$("input[name='checkbox']").each(function(){ 
				if($(this).prop("checked")){ 
					$(this).removeAttr("checked"); 
				}else{ 
					$(this).prop("checked", true); 
					} 
				})
             	   	flag=true;
			}
        });
        //批量删除
        $("#delete").unbind("click").click(function(){            	   	
		if(confirm('确定要删除所选吗?')){ 
			var checks = $("input[name='checkbox']:checked");
			if(checks.length == 0){ alert('未选中任何项！');return false;}
			    //将获取的值存入数组   
			    var checkData = new Array();
			    checks.each(function(){ 
			      	$(this).parent().parent().remove();
			    });   			   
			}
        });
		//定义删除信息方法的函数操作
		function deleteTr($Del){
			//找到删除的超链接对应的元素父节点的子节点，并弹出提示框
			var name = $Del.parent().parent().children().eq(0).text();
			//弹出“是否确认删除”的提示对话框，设置标志位flag
			var flag = window.confirm("是否确认删除");
			//判断标志位flag代表的情况是否正确
			if(flag){
			//确定删除时，就删除整行数据，表示flag为false。并弹出“用户信息已被删除”的提示
				$Del.parent().parent().remove();
				alert("用户已被删除");
				return false;
			}else{
				return false;
			}
		}

		}

	})

});

	</script>
	</head>
	<body>
		<center>
		<p>
			姓名:<input type="text" name="name" id="name" />
			性别:<select id="sex">
					<option value="男"  >男</option>
					<option value="女"  >女</option>
					</select>
			生日:<input type="date" id="birth" />
			住址：<select id="pro">   
                <option value="0">北京</option>  
                <option value="1">山西</option>  
            </select>  
            <select id="city">  
                <option id="cityx">西二旗</option>  
            </select>  
            <input type="submit" value="添加" style="background-color: greenyellow;" id="sub"/>
		</p>
		<p style="margin-left: 500px;">
			<input type="submit" value="全选/反选" id="change" style="background-color: yellow;"/>
			<input type="submit" value="批量删除" id="delete" style="background-color: red;"/>
		</p>
	<table align="center" id="tableid" border="1px" width="400px" bordercolor="grey" cellpadding="1px" cellspacing="0px">
	<thead>
	<tr>
	<th><input id="all" name='CheckAll' type='checkbox'></th> 
	<th>姓名</th>
	<th>性别</th>
	<th>生日</th>
	<th>住址</th>
	<th>删除</th>
	</tr>
	</thead>
	<tbody id="tbody" align="center"></tbody>
	</center>
	</body>
</html>

哪里来的神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户表的添加/删除/全选/反选/批量删除

table thead{background-color: gray;} table tr:nth-child(odd){background-color: gainsboro;} table tr:nth-child(even){background-color: ghostwhite;} $(function(){ //用户信息提交时触发的点击事件 $
复制链接

扫一扫