JQuary页面元素综合操作案例

最新推荐文章于 2024-10-01 09:29:45 发布

QiuBO.

最新推荐文章于 2024-10-01 09:29:45 发布

阅读量287

点赞数

文章标签： java html servlet

本文链接：https://blog.csdn.net/m0_70648941/article/details/127427088

版权

实现点击刷新之后出现数据并且实现添加删除，批量删除。

第一步：写页面布局，标题，按钮，复选框

<button id="refresh">刷新</button>
		<hr />
		<table>
			<thead>
				<th>勾选</th>
				<th>编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>品牌</th>
				<th>操作</th>
			</thead>
			<tbody id="list">
				
			</tbody>
		</table>
		<div>
			<input  type="checkbox" id="checkAll"   class="check"/>
			<span>全选&nbsp;&nbsp;&nbsp;&nbsp;</span>
			<button id="batchDel">删除</button>
		</div>

第二步：把想要的数据利用数组的形式存储（模拟一些数据，假设这些数据是通过后端程序读取的数据库内容）

var data=[
									{"id":1,"name":"方便面","price":3.5,"brand":"白象"},
									{"id":2,"name":"火腿肠","price":1.5,"brand":"双汇"},
									{"id":3,"name":"牛奶","price":4.5,"brand":"蒙牛"},
									{"id":4,"name":"瓜子","price":6.5,"brand":"金鸽"},
									{"id":5,"name":"辣条","price":5.5,"brand":"卫龙"},
									{"id":6,"name":"面包","price":3.5,"brand":"盼盼"},
								];

第三步：刷新生成数据，定义变量，读取数据，并且把数据生成每一行的标签元素添加到定义的变量中去

//刷新生成数据
								$("#refresh").click(function(){
									//当点击新的时候，首先清空元素
									$("#list").empty();
									//1,定义标签变量
									var dom="";
									//2,读取data中的数据，把数据生成每一行的标签元素追加到dom变量中
									for(var i=0;i<data.length;i++){
										var goods=data[i]
										dom+="<tr>"+
										"<td><input type='checkbox' class='check'/></td>";
										
										dom+="<td>"+goods.id+"<td/>"+
										"<td>"+goods.name+"<td/>"+
										"<td>"+goods.price+"<td/>"+
										"<td>"+goods.brand+"<td/>";
										
										dom+="<td>"+
										"<a href='#'>购买</a>&nbsp:"+
										"<button class='del'>删除</button>"+
										"</td>"+
										"</tr>";
									}
									//3.把dom变量追加到tbody中
									$("#list").append(dom)
									
								});

第四步：点击全选，勾选列表中所有的复选框（click不能对动态生成的元素执行事件绑定，必须使用on进行事件动态绑定）

//click不能对动态生成的元素执行事件绑定，必须使用on进行事件动态绑定
								//语法：元素.on(事件名，元素里面那个标签绑定，function(){})
								$("#list").on('click','.del',function(){
									//当前点击的删除按钮的父辈元素且名字是tr的进行移除
									$(this).parents("tr").remove()
								});
								//3.点击全选，勾选列表中所有的复选框
								$("#checkAll").click(function(){
									//获取当前复选框要变成的状态
									var flag=$(this).prop("checked");
									
									if(flag){
										//如果全选被勾选了，把id为list里面所有的class为check的复选框设置勾选
										$("#list .check").prop("checked",true)
									}else{
										//全选被取消了，把id为list里面所有的class为check的复选框设置取消勾选
										$("#list .check").prop("checked",false)
									}
								});

第五步：批量删除（筛选class叫做check的复选框，并且状态被勾选，删除它们父元素的tr行）

//批量删除
								$("#batchDel").click(function(){
									//筛选class叫做check的复选框，并且状态被勾选，删除它们父元素的tr行
									$(".check:checked").parents("tr").remove();
								});

页面总体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面元素综合操作</title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				//模拟一些数据，假设这些数据是通过后端程序读取的数据库内容
				var data=[
									{"id":1,"name":"方便面","price":3.5,"brand":"白象"},
									{"id":2,"name":"火腿肠","price":1.5,"brand":"双汇"},
									{"id":3,"name":"牛奶","price":4.5,"brand":"蒙牛"},
									{"id":4,"name":"瓜子","price":6.5,"brand":"金鸽"},
									{"id":5,"name":"辣条","price":5.5,"brand":"卫龙"},
									{"id":6,"name":"面包","price":3.5,"brand":"盼盼"},
								]; 
								
								//刷新生成数据
								$("#refresh").click(function(){
									//当点击新的时候，首先清空元素
									$("#list").empty();
									//1,定义标签变量
									var dom="";
									//2,读取data中的数据，把数据生成每一行的标签元素追加到dom变量中
									for(var i=0;i<data.length;i++){
										var goods=data[i]
										dom+="<tr>"+
										"<td><input type='checkbox' class='check'/></td>";
										
										dom+="<td>"+goods.id+"<td/>"+
										"<td>"+goods.name+"<td/>"+
										"<td>"+goods.price+"<td/>"+
										"<td>"+goods.brand+"<td/>";
										
										dom+="<td>"+
										"<a href='#'>购买</a>&nbsp:"+
										"<button class='del'>删除</button>"+
										"</td>"+
										"</tr>";
									}
									//3.把dom变量追加到tbody中
									$("#list").append(dom)
									
								});
								//click不能对动态生成的元素执行事件绑定，必须使用on进行事件动态绑定
								//语法：元素.on(事件名，元素里面那个标签绑定，function(){})
								$("#list").on('click','.del',function(){
									//当前点击的删除按钮的父辈元素且名字是tr的进行移除
									$(this).parents("tr").remove()
								});
								//3.点击全选，勾选列表中所有的复选框
								$("#checkAll").click(function(){
									//获取当前复选框要变成的状态
									var flag=$(this).prop("checked");
									
									if(flag){
										//如果全选被勾选了，把id为list里面所有的class为check的复选框设置勾选
										$("#list .check").prop("checked",true)
									}else{
										//全选被取消了，把id为list里面所有的class为check的复选框设置取消勾选
										$("#list .check").prop("checked",false)
									}
								});
								//批量删除
								$("#batchDel").click(function(){
									//筛选class叫做check的复选框，并且状态被勾选，删除它们父元素的tr行
									$(".check:checked").parents("tr").remove();
								});

			});
		</script>
	</head>
	<body>
		<button id="refresh">刷新</button>
		<hr />
		<table>
			<thead>
				<th>勾选</th>
				<th>编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>品牌</th>
				<th>操作</th>
			</thead>
			<tbody id="list">
				
			</tbody>
		</table>
		<div>
			<input  type="checkbox" id="checkAll"   class="check"/>
			<span>全选&nbsp;&nbsp;&nbsp;&nbsp;</span>
			<button id="batchDel">删除</button>
		</div>
	</body>
</html>