Jquery二级联动添加数据

最新推荐文章于 2022-12-30 17:49:39 发布

nijiadalinge

最新推荐文章于 2022-12-30 17:49:39 发布

阅读量281

点赞数

分类专栏：移动开发

本文链接：https://blog.csdn.net/NIJIADALINGE/article/details/79803806

版权

移动开发专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			table tr:nth-child(even){ background: #EEE;}
		</style>
		
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			
			function chan(){
				$("#cityz").siblings().remove();
				
				var shi=[["西二旗","海淀区"],["承德市","邯郸市"]];
				var sheng=$("#sheng").val();
				var city=$("#city");
				for (var i=0;i<shi[sheng].length;i++) {
					city.append("<option>"+shi[sheng][i]+"</option>");
				}
			}
			
			function add () {
				var uname=$("#uname").val();
				var sex=$("#sex option:selected").text();
				var bir=$("#bir").val();
				var sheng=$("#sheng option:selected").text();
				var city=$("#city option:selected").val();
				if (uname.length<3 || uname.length>20 || sex=="" || bir=="" || sheng=="请选择" || city=="请选择") {
					alert("输入信息有误!");
				} else{
					$("table").append("<tr><td><input type=\"checkbox\" name=\"ck\"/></td><td>"+uname+"</td><td>"+sex+"</td><td>"+bir+"</td><td>"+sheng+"-"+city+"</td><td><button οnclick=\"del(this)\">删除</button></td></tr>");
				}
			}
			
			function del(e){
				e.parentNode.parentNode.remove();
			}
			
			function delall(){
				var checks=$(":checked[name=ck]");
				if (checks.length==0) {
					alert("请至少选择一条删除！");
					return;
				}
				
				for(var i in checks){
					checks[i].parentNode.parentNode.remove();
				}
			}
			
			function xuan(e){
				var ckss=$("input[name=ck]");
				for (var i in ckss) {
					ckss[i].checked=e.checked;
				}
			}
			
			function xuanall(){
				var ckss=$("input[name=ck]")
				for(var i in ckss) {
					if (ckss[i].checked==false) {
						ckss[i].checked=true;
					} else{
						ckss[i].checked=false;
					}
				}
			}
		</script>
	</head>
	
	<body>
		
		姓名：<input id="uname" />
		性别：<select id="sex"><option>男</option><option>女</option></select>
		生日：<input id="bir" type="date" />
		住址：<select id="sheng" οnchange="chan()">
				<option>请选择</option>
				<option value="0">北京</option>
				<option value="1">河北</option>
			 </select>
			 
			 <select id="city">
			 	<option id="cityz">请选择</option>
			 </select><br />
			 
		<button οnclick="add()">添加</button>
		<button οnclick="xuanall()">全选/反选</button>
		<button οnclick="delall()">批量删除</button>
		
		<table width="400" cellspacing="0" border="1">
			<tr style="background-color: #999999;">
				<th><input type="checkbox" id="cks" οnchange="xuan(this)"/></th>
				<th>姓名</th>
				<th>性别</th>
				<th>生日</th>
				<th>住址</th>
				<th>删除 </th>
			</tr>
			
		</table>
	</body>
</html>

nijiadalinge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery二级联动添加数据

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; table tr:nth-child(even){ background: #EEE;} &lt;/st
复制链接

扫一扫