批量删除

最新推荐文章于 2023-01-30 15:12:33 发布

NewBee.Mu

最新推荐文章于 2023-01-30 15:12:33 发布

阅读量162

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/NewBeeMu/article/details/98185793

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style>
			*{
				font-size: 18px;
				font-family: "楷体";
			}
			tr{text-align: center;}
			table{
				border: 1px solid ghostwhite;
			}
			.bjys{
				background-color: ghostwhite;
			}
			.over{
				background-color: paleturquoise;
			}
			
		</style>
		
		<script>
			$(function(){
				$("table tr:odd").addClass("bjys");				
				$("table tr:gt(0)").mouseover(function(){					
					$(this).addClass("over");
				});
				$("table tr:gt(0)").mouseout(function(){					
					$(this).removeClass("over");
				});
				//1.给按钮绑定点击事件 获取选中状态
				//2.获取到除表头之外的所有框对象
				//3.分别给下面框的状态进行修改
				//4.想办法和表头的状态保持一致
				$("#checkAll").click(function(){
					//获取表头的选中状态
					var f = $(this).prop("checked");
					//获取下面所有的框对象  属性选择器  
					$("[name='ids']").prop("checked",f);
					
					
				});
				
				//批量删除
				$(".batchDelete").click(function(){
					//对象.each()
					//获取到所有选中的框
					var ch = $("[name='ids']:checked");
					//通过jquery循环获取第一个对象
					var ids = "";
					ch.each(function(){
						var v = $(this).val();
						ids+=v+",";
						
					});
					ids = ids.substring(0,ids.length-1);
					alert(ids);
					
				});
				
				
			});
			
		</script>
		
	</head>
	<body>
		<input type="button" value="批量删除" class="batchDelete" style="margin-left: 140px;" />
		<br>
		<center>
			<table cellspacing="0" border="1" width="80%" cellpadding="4px">
				<tr>
					<th width="40px">
						<input type="checkbox" id="checkAll" />
					</th>
					<th>订单编号</th>
					<th>订单商品</th>
					<th>订单备注信息</th>
					<th>创建时间</th>
				</tr>
				<tr>
					<td>
						<input name="ids" type="checkbox" value="1001" />
					</td>
					<td>1001</td>
					<td>卫龙辣条、老干妈、唐僧肉</td>
					<td>全是最爱</td>
					<td>2019年3月29日09:29:04</td>
				</tr>
				<tr>
					<td>
						<input name="ids" type="checkbox" value="1002" />
					</td>
					<td>1002</td>
					<td>卫龙辣条、老干妈、唐僧肉</td>
					<td>全是最爱</td>
					<td>2019年3月29日09:29:04</td>
				</tr>
				<tr>
					<td>
						<input name="ids" type="checkbox" value="1003" />
					</td>
					<td>1003</td>
					<td>卫龙辣条、老干妈、唐僧肉</td>
					<td>全是最爱</td>
					<td>2019年3月29日09:29:04</td>
				</tr>
				<tr>
					<td>
						<input name="ids" type="checkbox" value="1004" />
					</td>
					<td>1004</td>
					<td>卫龙辣条、老干妈、唐僧肉</td>
					<td>全是最爱</td>
					<td>2019年3月29日09:29:04</td>
				</tr>
				
			</table>
		</center>
	</body>
</html>

NewBee.Mu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
批量删除

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <...
复制链接

扫一扫