Java Web第三章

于 2023-11-19 18:27:30 发布
阅读量25 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_79704390/article/details/134493462
版权

界面中表格的增删改功能

界面样式代码：

<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>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>1234</td>
            <td>男</td>
            <td>18</td>
            <td>吃-喝</td>
            <td><button class="del">删除</button> </td>
            <td><button class="update">修改</button> </td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>1234</td>
            <td>男</td>
            <td>18</td>
            <td>吃-喝</td>
            <td><button class="del">删除</button> </td>
            <td><button class="update">修改</button> </td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>1234</td>
            <td>男</td>
            <td>18</td>
            <td>吃-喝</td>
            <td><button class="del">删除</button> </td>
            <td><button class="update">修改</button> </td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>1234</td>
            <td>男</td>
            <td>18</td>
            <td>吃-喝</td>
            <td><button class="del">删除</button> </td>
            <td><button class="update">修改</button> </td>
        </tr>
    </table>
    <button id="addBtn">新增</button>
</div>

<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";
           }
       }
   }

   var btn2 =  document.getElementsByClassName("update");
   for (var i = 0 ;i<btn2.length;i++){
       btn2[i].onclick = function (){
           var b = confirm("是否修改本条数据");
           if (b){
              //进入一个新的修改数据的页面  或  弹出一个窗口 在当前页面下的窗口下进行修改
               //由于JS内置的弹窗功能太过简单 所以需要自制一个自定义窗口
               //自定义窗口 本质就是一个div  然后隐藏  需要的时候 显示
                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;
        }

        #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">
        <!--
            readonly:只可读取  不可编辑
            disable:  禁用  不可读取也不可编辑
         -->
        编号:<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;
        }

    </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><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>

<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>
                <!--该方法只适用于参数较少的情况。
                 如果参数很多 思路如下： 1.根据id查询所有数据（a.担心你在浏览的过程中，别人早就修改了 b.方便后续操作数据）
                                         2.写一个根据id查询数据的servlet
                -->

                <td><button><a href="/QueryByIdServlet?id=${userinfo.id}">修改</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>

2302_79704390
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值