html+js的数据展示页面

天晓蓝
已于 2023-07-17 21:34:36 修改
阅读量423
点赞数
文章标签： javascript html 前端
于 2023-07-17 20:36:54 首次发布
本文链接：https://blog.csdn.net/weixin_45555153/article/details/131774481
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>view_edit</title>

    <style>
        td,
        tr {
            height: 30px;
            width: 150px;
            text-align: center;
        }

        .modifydiv,
        .adddiv,
        .deletediv {
            display: none;
            position: fixed;
            top: 30%;
            left: 35%;
            border-radius: 10px;
            border: solid;
            background-color: rgba(78, 122, 242, 0.97);
            padding: 20px;
            color: white;
            outline: none;
            transition: all 300ms ease-in-out;
            text-align: left;
            z-index: 20;
        }

        .active0 {
            display: block;
        }

        input:hover,
        input:active {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <table border="1" style="border-collapse: collapse">
        <tr>
            <th>Id</th>
            <th>姓名</th>
            <th>出生日期</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>02</td>
            <td>钱电</td>
            <td>1990-12-21</td>
            <td>男</td>
            <td>
                <input type="button" value="编辑" class="edit">
                <div class="modifydiv">
                    <form action="/web09/student/update" method="post">
                        <p>编辑学生信息</p>
                        <span id="modifyerr"></span><br>
                        Id:<input type="text" name="id" autocomplete="off"><br>
                        姓名：<input type="text" name="name" autocomplete="off"><br>
                        出生日期：<input type="date" name="bri"><br>
                        性别：<input type="radio" name="sex" value="男">男
                        <input type="radio" name="sex" value="女">女<br>
                        <input type="submit" value="确定" class="modok">
                        <input type="button" value="关闭" class="modclose">
                    </form>
                </div>
                <input type="button" value="删除" class="delete">
                <div class="deletediv">
                    <form action="/web09/student/delete" method="post">
                        id:<input type="text" name="id">
                        <p>确认删除该id的学生吗?</p>
                        <input type="submit" value="确认" class="delok">
                        <input type="button" value="取消" class="delclose">
                    </form>
                </div>
            </td>
        </tr>


        <tr>
            <td>03</td>
            <td>孙风</td>
            <td>1990-12-20</td>
            <td>男</td>
            <td>
                <input type="button" value="编辑" class="edit">
                <div class="modifydiv">
                    <form action="/web09/student/update" method="post">
                        <p>编辑学生信息</p>
                        <span id="modifyerr"></span><br>
                        Id:<input type="text" name="id" autocomplete="off"><br>
                        姓名：<input type="text" name="name" autocomplete="off"><br>
                        出生日期：<input type="date" name="bri"><br>
                        性别：<input type="radio" name="sex" value="男">男
                        <input type="radio" name="sex" value="女">女<br>
                        <input type="submit" value="确定" class="modok">
                        <input type="button" value="关闭" class="modclose">
                    </form>
                </div>
                <input type="button" value="删除" class="delete">
                <div class="deletediv">
                    <form action="/web09/student/delete" method="post">
                        id:<input type="text" name="id">
                        <p>确认删除该id的学生吗?</p>
                        <input type="submit" value="确认" class="delok">
                        <input type="button" value="取消" class="delclose">
                    </form>
                </div>
            </td>
        </tr>


        <tr>
            <td>04</td>
            <td>李云</td>
            <td>1990-12-06</td>
            <td>男</td>
            <td>
                <input type="button" value="编辑" class="edit">
                <div class="modifydiv">
                    <form action="/web09/student/update" method="post">
                        <p>编辑学生信息</p>
                        <span id="modifyerr"></span><br>
                        Id:<input type="text" name="id" autocomplete="off"><br>
                        姓名：<input type="text" name="name" autocomplete="off"><br>
                        出生日期：<input type="date" name="bri"><br>
                        性别：<input type="radio" name="sex" value="男">男
                        <input type="radio" name="sex" value="女">女<br>
                        <input type="submit" value="确定" class="modok">
                        <input type="button" value="关闭" class="modclose">
                    </form>
                </div>
                <input type="button" value="删除" class="delete">
                <div class="deletediv">
                    <form action="/web09/student/delete" method="post">
                        id:<input type="text" name="id">
                        <p>确认删除该id的学生吗?</p>
                        <input type="submit" value="确认" class="delok">
                        <input type="button" value="取消" class="delclose">
                    </form>
                </div>
            </td>
        </tr>


        <tr>
            <td>05</td>
            <td>周梅</td>
            <td>1991-12-01</td>
            <td>女</td>
            <td>
                <input type="button" value="编辑" class="edit">
                <div class="modifydiv">
                    <form action="/web09/student/update" method="post">
                        <p>编辑学生信息</p>
                        <span id="modifyerr"></span><br>
                        Id:<input type="text" name="id" autocomplete="off"><br>
                        姓名：<input type="text" name="name" autocomplete="off"><br>
                        出生日期：<input type="date" name="bri"><br>
                        性别：<input type="radio" name="sex" value="男">男
                        <input type="radio" name="sex" value="女">女<br>
                        <input type="submit" value="确定" class="modok">
                        <input type="button" value="关闭" class="modclose">
                    </form>
                </div>
                <input type="button" value="删除" class="delete">
                <div class="deletediv">
                    <form action="/web09/student/delete" method="post">
                        id:<input type="text" name="id">
                        <p>确认删除该id的学生吗?</p>
                        <input type="submit" value="确认" class="delok">
                        <input type="button" value="取消" class="delclose">
                    </form>
                </div>
            </td>
        </tr>

        <input type="button" value="添加+" class="add" id="add" onclick="togglePopup3()">
        <div class="adddiv" id="popup3">
            <form action="/web09/student/add" method="post">
                <p>添加学生信息</p>
                <span id="adderr">${requestScope.addmessage}</span><br>
                Id:<input type="text" name="id" autocomplete="off"><br>
                姓名：<input type="text" name="name" autocomplete="off"><br>
                出生日期：<input type="date" name="bri"><br>
                性别：<input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女<br>
                <input type="submit" value="确定" onclick="togglePopup3()">
                <input type="button" onclick="togglePopup3()" value="关闭">
            </form>
        </div>
    </table>
</body>
<script>
    var popup3 = document.getElementById("popup3");
    var edits = document.querySelectorAll(".edit");
    var deletes = document.querySelectorAll(".delete");
    var deletedivs = document.querySelectorAll(".deletediv");
    var modifydivs = document.querySelectorAll(".modifydiv");

    var modclose = document.querySelectorAll(".modclose");
    var delclose = document.querySelectorAll(".delclose");

    //获取编辑事件
    for (let i = 0; i < edits.length; i++) {
        modify(i, edits, modifydivs, deletes, deletedivs, popup3);
    };
    //获取删除事件
    for (let i = 0; i < deletes.length; i++) {
        remove(i, edits, modifydivs, deletes, deletedivs, popup3);
    };

    //获取编辑的关闭事件
    for (let i = 0; i < modclose.length; i++) {
        modclo(i, modclose, modifydivs);
    }
    //获取删除的关闭事件
    for (let i = 0; i < delclose.length; i++) {
        delclo(i, delclose, deletedivs);
    }

    //编辑的点击事件函数
    function modify(index, edits, modifydivs, deletes, deletedivs, popup3) {
        edits[index].onclick = function () {
            if (modifydivs[index].style.display != "block") {
                modifydivs[index].style.display = "block";
            } else {
                modifydivs[index].style.display = "none";
            };
            for (let n = 0; n < modifydivs.length; n++) {
                if (n != index && modifydivs[n].style.display == "block") {
                    modifydivs[n].style.display = "none";
                }
            };
            for (let i = 0; i < deletedivs.length; i++) {
                if (deletedivs[i].style.display == "block") {
                    deletedivs[i].style.display = "none";
                }
            };
            if (popup3.style.display == "block") {
                popup3.style.display = "none";
            }
        }
    }
    //删除的点击事件函数
    function remove(index, edits, modifydivs, deletes, deletedivs, popup3) {
        deletes[index].onclick = function () {
            if (deletedivs[index].style.display != "block") {
                deletedivs[index].style.display = "block";
            } else {
                deletedivs[index].style.display = "none";
            };
            for (let n = 0; n < deletedivs.length; n++) {
                if (n != index && deletedivs[n].style.display == "block") {
                    deletedivs[n].style.display = "none";
                }
            };
            for (let i = 0; i < modifydivs.length; i++) {
                if (modifydivs[i].style.display == "block") {
                    modifydivs[i].style.display = "none";
                }
            };
            if (popup3.style.display == "block") {
                popup3.style.display = "none";
            }
        }
    }
    //添加的点击和关闭事件
    function togglePopup3() {
        popup3.classList.toggle("active0");
        for (let i = 0; i < modifydivs.length; i++) {
            if (modifydivs[i].style.display == "block") {
                modifydivs[i].style.display = "none";
            }
        };
        for (let i = 0; i < deletedivs.length; i++) {
            if (deletedivs[i].style.display == "block") {
                deletedivs[i].style.display = "none";
            }
        }
    }
    //编辑的关闭函数
    function modclo(i, modclose, modifydivs) {
        modclose[i].onclick = function () {
            modifydivs[i].style.display = "none";
        }
    }
    //删除的关闭函数
    function delclo(index, delclose, deletedivs) {
        delclose[index].onclick = function () {
            deletedivs[index].style.display = "none";
        }
    }
</script>

</html>