confirm 确认框的使用

最新推荐文章于 2022-06-17 00:30:45 发布

kjshuan

最新推荐文章于 2022-06-17 00:30:45 发布

阅读量1.4k

点赞数 1

分类专栏： Java 文章标签： JavaWeb Confirm

本文链接：https://blog.csdn.net/just_learing/article/details/124213423

版权

Java 专栏收录该内容

111 篇文章 6 订阅

订阅专栏

本文档展示了如何使用Java和JSP实现了一个图书信息管理页面，包括表格布局的书籍列表、删除操作提示以及新增和随机添加图书的功能。通过CSS样式美化了界面，并使用JavaScript处理了删除操作的确认对话框。

摘要由CSDN通过智能技术生成

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书信息</title>
<style type="text/css">
html, body {
	height: 100%;
	overflow: auto;
}

body {
	background: url(ac.jpg) top left;
	background-size: 100%;
}

span {
	color: red;
	font-size: 30px;
}

#a {
	font-size: 20px;
}

table {
	/* 设置了这个属性，其余所有td都是相同的宽度。
这样操作之后，table是宽度固定了，但是里面的文章如果很长，文字会覆盖 */
	table-layout: fixed;
}

td {
	/* 自动换行就好了 */
	/* word-wrap:break-word; */
	width: 10px;
	height: 11px
}
</style>
</head>

<body>

	<div>

		<!-- 	div  width 100等于 左靠齐 -->
		<div style="margin: 0px auto; width: 100%">

			<div style="width: 100%; text-align: center">
				<h1 style="color: blue">欢迎进入图书信息</h1>
			</div>
			
			<!-- 	width 1000等于表格宽度 -->
			<table border="1px" cellspacing="0px" width="1700" height="150">
				<tr>
					<th colspan="6">学生信息</th>
				</tr>
				<tr>

					<th>图书名称</th>
					<th>图书作者</th>
					<th>购买时间</th>
					<th>图书分类</th>
					<th>操作</th>
				</tr>

				<c:forEach var="list1" items="${books}">
					<c:if test="${list1.id%2==0}">
						<tr style="background-color: pink">
					</c:if>
					<c:if test="${list1.id%2!=0}">
						<tr>
					</c:if>
					<td>${list1.name}</td>
					<td>${list1.author}</td>
					<td>${list1.timebuy}</td>
					<td>${list1.typebook}</td>
					<td><a id="btn" class="butc1" href="${pageContext.request.contextPath}/jsp/DeleteServlet?qqq=${list1.id}">删除</a>（慎点数据会丢失）</td>
					</tr>
				</c:forEach>


			</table>
			
			<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

			<script type="text/javascript">
		
				$(".butc1").click(function() {	
					var s=confirm("确认删除这本书吗")
					//confrim 会让选择确定还是 取消  
					if(!s){//如果是取消 返回false 加个！ 变成true
						$(".butc1").attr({"href":"#"});//获取a标签 href的属性 改成# 实现不跳转
					}
					//否则跳转执行删除
				})
			</script>
			
			<%-- href="${pageContext.request.contextPath}/jsp/DeleteServlet?qqq=${list1.id}" --%>
			<!-- <a id="btn1" class="butc" href="#">用户删除</a>（慎点 数据会丢失） <br> <br> -->
			
			
			
			<form action="addbook.jsp" mehtod="get">
				<input type="hidden" max="30" min="1" name="adds" value="1" /> <input
					type="submit" value="新增图书信息" style="font-size: 20px"
					style="font-size: 20px" />
			</form>




			<div style="margin: 0px auto; width: 20%">

				<br> <br>
				<form
					action="${pageContext.request.contextPath}/jsp/Addbook2Servlet"
					mehtod="get">
					<h1>
						随机新增2本书：<input type="hidden" max="30" min="1" name="adds"
							value="1" /> <input type="submit" value="添加"
							style="font-size: 20px" style="font-size: 20px" />
					</h1>
				</form>
		
			</div>

		</div>

	</div>


	</div>
	</div>
</body>
</html>