hhkfzhoukao2

最新推荐文章于 2022-04-20 13:42:09 发布
Androidoux98
最新推荐文章于 2022-04-20 13:42:09 发布
阅读量245
点赞数
本文链接：https://blog.youkuaiyun.com/Androidoux98/article/details/79784667
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js类库/jquery-1.11.0.min.js">
		</script>
		<style>
			table tr th{
				width: 150px;
				background: #999999;
			}
		</style>
	</head>
	<body>
		姓名:<input type="text" id="name" /><br />
		性别:<select id="sex">
			<option value="男">男</option>
			<option value="女">女</option>
		</select><br />
		爱好:<input type="checkbox" name="like" value="唱歌"/>唱歌<br />
		       <input type="checkbox" name="like" value="睡觉"/>睡觉<br />
		       <input type="checkbox" name="like" value="游戏"/>游戏<br />
		籍贯:<select id="pro">
			<option value="0">北京</option>
			<option value="1">河北</option>
		</select>
		<select id="city">
			<option >海淀</option>
			<option >朝阳</option>
		</select><br /><br />
		<input type="button" id="insert" value="注册" style="margin-left:100px;background: yellow;border-radius: 5px;"/>
		 <br /><br /><table border="1" cellspacing="0" cellpadding="1" id="tab">
			<tr>
				<th><input type="checkbox" id="ck" /></th>
				<th>姓名</th>
				<th>性别</th>
				<th>爱好</th>
				<th>籍贯</th>
				<th>操作</th>
			</tr>
			
		</table>
	    <br /><br />
		<input type="button" id="quanxuan" value="全选" style="margin-left: 100px;background: yellow;border-radius: 5px;"/>
		<input type="button" id="fanxuan" value="反选" style="margin-left: 100px;background: yellow;border-radius: 5px;"/>
		<input type="button" id="delete" value="批量删除" style="margin-left: 100px;background: yellow;border-radius: 5px;"/>
	</body>
	<script>
		$(function(){
			$("#insert").click(function(){
				var name=$("#name").val();
				var sex=$("#sex").val();
				var like=[];	
				$('input[name="like"]:checked').each(function(){
      			like.push($(this).val());
     			 });
				var pro=$("#pro option:checked").text();
				var city=$("#city option:checked").text();
				if (name!="") {
					if (name.length>=6&&name.length<=12) {
						$("#tab").append("<tr style='text-align: center;'><td ><input type='checkbox' name='kk'></td><td>"+name+"</td><td>"+sex+"</td><td>"+like+"</td><td>"+pro+"-"+city+"</td><td><input type='button' id='del' value='删除' οnclick='dl(this)' style='background: yellow;border-radius: 5px;'/></td></tr>");
				
					} else{
						alert("用户名长度需在6-12位之间!");
					}
				} else{
					alert("请输入用户名!");
				}
			})
			dl=function(dd){
				$(dd).parent().parent().remove();
			}
			$("#ck").click(function(){
				var ck=$("#ck")[0].checked;
				var ckk=$("input[name='kk']");
				for (var i=0;i<ckk.length;i++) {
					ckk[i].checked=ck;
				}
			})
			$("#delete").click(function(){
				var ce=$("input:checked[name='kk']");
				
				if (ce.length!=0) {
					var f =confirm("确认删除?");
					if(f){
					for (var i=0;i<ce.length;i++) {
					ce[i].parentNode.parentNode.remove();
				}
					$("#ck")[0].checked=false;
				}
				} else{
					alert("请选择数据");
				}
			})
			$("#quanxuan").click(function(){
				$("#ck")[0].checked=true;
				var ckk=$("input[name='kk']");
				for (var i=0;i<ckk.length;i++) {
					ckk[i].checked=true;
				}
			})
			$("#fanxuan").click(function(){
				$("#ck")[0].checked=false;
				var ckk=$("input[name='kk']");
				for (var i=0;i<ckk.length;i++) {
					ckk[i].checked=false;
				}
			})
			var citi=new Array(2);
			citi[0]=new Array("海淀","朝阳");
			citi[1]=new Array("沧州","保定");
			$("#pro").change(function(){
				$("#city").empty();
				var ccc=this.value;
				for (var i=0;i<citi.length;i++) {
					if (ccc==i) {
						for (var j=0;j<citi[i].length;j++) {
							$("#city").append("<option>"+citi[i][j]+"</option>")
						}
					}
				}
			})
		})
	</script>
</html>