Wed 第三章

岳职软件22-01-40

已于 2023-11-19 20:59:04 修改

阅读量42

点赞数

文章标签： web

于 2023-11-19 20:57:55 首次发布

本文链接：https://blog.csdn.net/2301_79613063/article/details/134495475

版权

界面中表格的增删改功能

界面样式代码：

<head>
<meta charset="utf-8">
<title></title>
<style>
td{
width: 80px;
}

#update,#add{
border: 1px solid black;
width: 400px;
height: 300px;
text-align: center;
line-height: 30px;
margin: auto;
display: none;
}

</style>
</head>

<div id="update">
<form action="/UpdateServlet" method="post">
编号:<input type="text"><br>
账号:<input type="text"><br>
密码:<input type="text"><br>
性别:<input type="text"><br>
年龄:<input type="text"><br>
爱好:<input type="text"><br>
<input type="submit" value="修改">
<input type="button" class="cancel" value="取消">
</form>
</div>
<div id="add">
<form action="/AddServlet" method="post">
账号:<input type="text"><br>
密码:<input type="text"><br>
性别:<input type="text"><br>
年龄:<input type="text"><br>
爱好:<input type="text"><br>
<input type="submit" value="新增">
<input type="button" class="cancel" value="取消">
</form>
</div>
<script>
var btn1 = document.getElementsByClassName("del");
for (var i = 0 ;i<btn1.length;i++){
btn1[i].onclick = function (){
var b = confirm("是否删除本条数据");
if (b){
//进入后台
location.href = "XxxServlet";
}
}
}

document.getElementById("addBtn").onclick = function (){
document.getElementById("add").style.display = "block";
}

document.getElementsByClassName("cancel")[0].onclick = function (){
document.getElementById("update").style.display = "none";
}

document.getElementsByClassName("cancel")[1].onclick = function (){
document.getElementById("add").style.display = "none";
}

</script>

修改数据有三种代码（增删代码一样）:

第一种:

<head>
<meta charset="utf-8">
<title></title>
<style>
td{
width: 80px;
}

#update,#add{
border: 1px solid black;
width: 400px;
height: 300px;
text-align: center;
line-height: 30px;
margin: auto;
display: none;
}

</style>
</head>
<div align="center">
<table style="text-align: center;" border="1px" style="border: 1px solid black;" cellpadding="0" cellspacing="0">
<tr>
<td>编号</td>
<td>账号</td>
<td>密码</td>
<td>性别</td>
<td>年龄</td>
<td>爱好</td>
<td>删除</td>
<td>修改</td>
</tr>

<c:forEach var="userinfo" items="${list}">
<tr>
<td>${userinfo.id}</td>
<td>${userinfo.username}</td>
<td>${userinfo.password}</td>
<td>${userinfo.sex}</td>
<td>${userinfo.age}</td>
<td>${userinfo.likes}</td>
<td><button name="${userinfo.id}" class="del">删除</button> </td>
<td><button name="${userinfo.id},${userinfo.username},${userinfo.password},${userinfo.sex},${userinfo.age},${userinfo.likes}" class="update">修改</button> </td>
</tr>
</c:forEach>

</table>
<button id="addBtn">新增</button>
</div>

<div id="update">
<form action="/UpdateServlet" method="post">

编号:<input id="a1" type="text" readonly name="id" ><br>
账号:<input id="a2" type="text" name="username"><br>
密码:<input id="a3" type="text" name="password"><br>
性别:<input id="a4" type="text" name="sex"><br>
年龄:<input id="a5" type="text" name="age"><br>
爱好:<input id="a6" type="text" name="likes"><br>
<input type="submit" value="修改">
<input type="button" class="cancel" value="取消">
</form>
</div>
<div id="add">
<form action="/AddServlet" method="post">
账号:<input type="text" name="username"><br>
密码:<input type="text" name="password">><br>
性别:<input type="text" name="sex">><br>
年龄:<input type="text" name="age">><br>
爱好:<input type="text" name="likes">><br>
<input type="submit" value="新增">
<input type="button" class="cancel" value="取消">
</form>
</div>
<script>
var btn1 = document.getElementsByClassName("del");
for (var i = 0 ;i<btn1.length;i++){
btn1[i].onclick = function (){
var b = confirm("是否删除本条数据");
if (b){
//进入后台
//获取当前点击按钮的name属性
var id = this.getAttribute("name")
location.href = "/DelServlet?id=" + id;
}
}
}

var btn2 = document.getElementsByClassName("update");
for (var i = 0 ;i<btn2.length;i++){
btn2[i].onclick = function (){
//进入一个新的修改数据的页面或弹出一个窗口在当前页面下的窗口下进行修改
//由于JS内置的弹窗功能太过简单所以需要自制一个自定义窗口
//自定义窗口本质就是一个div 然后隐藏需要的时候显示
//如何实现修改页面的数据回显（一个页面的数据回显到另外一个页面）
var str = this.getAttribute("name");
//处理有规律的字符串将其拆成一个数组
str = str.split(",");
document.getElementById("a1").value = str[0];
document.getElementById("a2").value = str[1];
document.getElementById("a3").value = str[2];
document.getElementById("a4").value = str[3];
document.getElementById("a5").value = str[4];
document.getElementById("a6").value = str[5];
document.getElementById("update").style.display = "block";
}
}

document.getElementById("addBtn").onclick = function (){
document.getElementById("add").style.display = "block";
}

document.getElementsByClassName("cancel")[0].onclick = function (){
document.getElementById("update").style.display = "none";
}

document.getElementsByClassName("cancel")[1].onclick = function (){
document.getElementById("add").style.display = "none";
}
</script>

第二种:

<head>
<meta charset="utf-8">
<title></title>
<style>
td{
width: 80px;
}

a{
text-decoration: none;
color: black;
}

#update,#add{
border: 1px solid black;
width: 400px;
height: 300px;
text-align: center;
line-height: 30px;
margin: auto;
display: none;
}

<c:forEach var="userinfo" items="${list}">
<tr>
<td>${userinfo.id}</td>
<td>${userinfo.username}</td>
<td>${userinfo.password}</td>
<td>${userinfo.sex}</td>
<td>${userinfo.age}</td>
<td>${userinfo.likes}</td>
<td><button name="${userinfo.id}" class="del">删除</button> </td>
<td><button><a href="update.jsp?id=${userinfo.id}&username=${userinfo.username}&password=${userinfo.password}&sex=${userinfo.sex}&age=${userinfo.age}&likes=${userinfo.likes}">修改</a></button> </td>
</tr>
</c:forEach>

</table>
<button id="addBtn">新增</button>
</div>

<div id="add">
<form action="/AddServlet" method="post">
账号:<input type="text" name="username"><br>
密码:<input type="text" name="password">><br>
性别:<input type="text" name="sex">><br>
年龄:<input type="text" name="age">><br>
爱好:<input type="text" name="likes">><br>
<input type="submit" value="新增">
<input type="button" class="cancel" value="取消">
</form>
</div>
<script>
var btn1 = document.getElementsByClassName("del");
for (var i = 0 ;i<btn1.length;i++){
btn1[i].onclick = function (){
var b = confirm("是否删除本条数据");
if (b){
//进入后台
//获取当前点击按钮的name属性
var id = this.getAttribute("name")
location.href = "/DelServlet?id=" + id;
}
}
}

var btn2 = document.getElementsByClassName("update");
for (var i = 0 ;i<btn2.length;i++){
btn2[i].onclick = function (){
//进入一个新的修改数据的页面
//如何实现修改页面的数据回显（一个页面的数据回显到另外一个页面）
var str = this.getAttribute("name");
//处理有规律的字符串将其拆成一个数组
str = str.split(",");
document.getElementById("a1").value = str[0];
document.getElementById("a2").value = str[1];
document.getElementById("a3").value = str[2];
document.getElementById("a4").value = str[3];
document.getElementById("a5").value = str[4];
document.getElementById("a6").value = str[5];
document.getElementById("update").style.display = "block";
}
}

document.getElementById("addBtn").onclick = function (){
document.getElementById("add").style.display = "block";
}

document.getElementsByClassName("cancel")[0].onclick = function (){
document.getElementById("add").style.display = "none";
}
</script>

第三种:

<head>
<meta charset="utf-8">
<title></title>
<style>
td{
width: 80px;
}

a{
text-decoration: none;
color: black;
}

#update,#add{
border: 1px solid black;
width: 400px;
height: 300px;
text-align: center;
line-height: 30px;
margin: auto;
display: none;
}

</style>
</head>
<body>

<c:forEach var="userinfo" items="${list}">
<tr>
<td>${userinfo.id}</td>
<td>${userinfo.username}</td>
<td>${userinfo.password}</td>
<td>${userinfo.sex}</td>
<td>${userinfo.age}</td>
<td>${userinfo.likes}</td>
<td><button name="${userinfo.id}" class="del">删除</button> </td>

</table>
<button id="addBtn">新增</button>
</div>