HTML jquery 添加+删除+批量删除+二级联动

最新推荐文章于 2021-07-10 18:37:29 发布

潜水断桥

最新推荐文章于 2021-07-10 18:37:29 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37454196/article/details/78766527

本文详细介绍了如何使用HTML和jQuery进行动态数据操作，包括添加、删除、批量删除元素的方法，同时探讨了实现二级联动下拉菜单的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				width:80%;
				margin: 0 auto;				
			}
			table{
				width: 100%;
				border: 1px solid;
			}
			th,td{
				border: 1px solid;
			}
			tr:hover{
				background-color: yellow;
			}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
		<!-- jquery事件方法 -->
		<script>
			$(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>
		<script>
			function del(e){
				$(e).parent().parent().remove();
			}
			
			function save(){
			
				var tr=$("<tr></tr>"); //使用jquery创建元素tr
				
				tr.append("<td><input type='checkbox' name='ck' /> </td>");//append,识别html标签
				//获取用户名输入框的内容
				var td=$("<td></td>");
					td.text($("#uname").val());
				tr.append(td);
				//获取用户名输入框的内容
				var td=$("<td></td>");
					td.text($("#pwd").val());
				tr.append(td);
				//获取 性别的值
				var td=$("<td></td>");
					td.text($(":checked[name='sex']").val());
				tr.append(td);
				//获取邮箱
				var td=$("<td></td>");
					td.text($("#email").val());
				tr.append(td);
				//获取省
				var td=$("<td></td>");
					td.text($("#pro option:selected").text());
				tr.append(td);
				
				var td=$("<td></td>");
					td.text($("#city").val());
				tr.append(td);

				

				tr.append("<td><button onclick='del(this)'>删除</button></td>");//append,识别html标签
				//向table中添加一行数据
				$("table").append(tr);
			}
			function deleteAll(){
				var all= $("input:checked[name='ck']"); //所有name为ck并且是选择状态的checkbox
				console.log(all.length);  //所有选中的复选框的长度
				if(all.length==0){
					alert("请选择,然后进行删除");
					return;  //下面代码不执行
				}
				
				var f=confirm("确认删除!!");
				if(!f){ //如果点击了取消,不进行下面的删除
					return;
				}
				//删除
				for(var i=0;i<all.length;i++){
					all[i].parentNode.parentNode.remove();
				}
			}
			
			function ckAll(){
                var isxz=$("#ckall")[0].checked;  //标识的作用
                
                //获取下面每个用户的选择框
                var cks= $("input[name='ck']");
                //调用jquery的遍历方法
				cks.each(function(){
					$(this).prop("checked",isxz);
				})
			}
			
			
			
		</script>
	</head>
	<body>
		<!--业务逻辑 -->
		<!--批量删除时: 1 获取所有选择的复选框元素   $("input:checked") -->
		<!--           2 $("img").each(function(i){this.src = "test" + i + ".jpg";   把选择的复选框对应行进行删除
                  });-->
		<form>
			用户名<input type="text" id="uname" />
			密码: <input type="password" id="pwd" />
			性别:<input type="radio" name="sex" value="男" checked="checked" />男
			     <input type="radio" name="sex" value="女" />女 
			邮箱  <input type="email" id="email" />
			省:
			<select id="pro" >
				<option>--请选择--</option>
				<option value="0" selected="selected">北京</option>
				<option value="1">河南</option>
			</select>
			市:
			<select id="city">
				<option id="cityx">--请选择--</option>
				<option selected="selected">西二旗</option>
				<option>上地</option>
			</select>
			
			
			<input type="button" onclick="save()" value="保存" />
		</form>
		<table>
			<tr> <td colspan="5">
				<button id="deleteAll" onclick="deleteAll()">批量删除</button>
			</td> </tr>
			<tr>
				<th><input type="checkbox" id="ckall" onchange="ckAll()" /> 全选/全不选 </th>
				<th>用户名</th>
				<th>密码</th>
				<th>性别</th>
				<th>邮箱</th>
				<th>省</th>
				<th>市</th>
				<th><button>操作</button></th>
			</tr>
			<tr>
				<td><input type="checkbox" name="ck" /></td>
				<td>马云</td>
				<td>123</td>
				<td>女</td>
				<td>123@qq.com</td>
				<td>北京</td>
				<td>昌平</td>
				<td>
				<button onclick="del(this)">删除</button>
				</td>
			</tr>
		</table>
	</body>
</html>