原生js增删改

哆啦A梦的百宝箱口袋
于 2022-07-18 08:21:24 发布
阅读量77
点赞数
文章标签： javascript 前端经验分享
本文链接：https://blog.csdn.net/m0_67658927/article/details/125840512
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <div id="wenzi">
            <span>用户名：<br></span>
            <span>密码：<br></span>
            <span>确认密码：<br></span>
            <span>手机号：<br></span>
            <span>姓名：<br></span>
            <span>身份证号：<br></span>
        </div>
        <div id="inputs">
            <input type="text" id="username"> <span id="username2"></span> <br>
            <input type="text" id="mima"> <span id="mima2"></span><br>
            <input type="text" id="queren"> <span id="queren2"></span><br>
            <input type="text" id="shoujihao"> <span id="shoujihao2"></span><br>
            <input type="text" id="xingming"> <span id="xingming2"></span><br>
            <input type="text" id="shenfenzheng"> <span id="shenfenzheng2"></span><br>
        </div>
        <div id="buttons">
            <button id="button">确认</button>
        </div>
    </div>
    <table cellspacing="0">
        <tr>
            <td>用户名</td>
            <td>手机号</td>
            <td>姓名</td>
            <td>身份证</td>
            <td>操作</td>
        </tr>
    </table>
    <table id="table" cellspacing="0"></table>
    <div id="div1">
        <table id="table" cellspacing="0">
            <td>用户名</td>
            <td>手机号</td>
            <td>姓名</td>
            <td>身份证</td>
        </table>
        <table id="table" cellspacing="0"></table>
        <table id="tbodys"></table>
    </div>
    <!-- 幕布 -->
    <div id="mubu"></div>
</body>
<script>
    var num = 0
    var nums = null
    var arr = []
    username.onblur = function () {
        var usernamePD = /^[a-z](?=.*[A-Za-z])(?=.*[\d])(?=.*_)/
        var usernameVal = document.getElementById("username").value
        var username2 = document.getElementById("username2")
        usernamePD.test(usernameVal) == true ? username2.innerHTML = "√" : username2.innerHTML = "X"
    }
    mima.onblur = function () {
        var mimaPD = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/
        var mimaVal = document.getElementById("mima").value
        var mima2 = document.getElementById("mima2")
        mimaPD.test(mimaVal) == true ? mima2.innerHTML = "√" : mima2.innerHTML = "X"
    }
    queren.onblur = function () {
        var querenPD = document.getElementById("mima").value
        var querenVal = document.getElementById("queren").value
        var queren2 = document.getElementById("queren2")
        querenPD == querenVal ? queren2.innerHTML = "√" : queren2.innerHTML = "X"
    }
    shoujihao.onblur = function () {
        var shoujihaoPD = /^[1][3,4,5,7,8][0-9]{9}$/;
        var shoujihaoVal = document.getElementById("shoujihao").value
        var shoujihao2 = document.getElementById("shoujihao2")
        shoujihaoPD.test(shoujihaoVal) == true ? shoujihao2.innerHTML = "√" : shoujihao2.innerHTML = "X"
    }
    xingming.onblur = function () {
        var xingmingPD = /^[\u4E00-\u9FA5]{2,4}$/;
        var xingmingVal = document.getElementById("xingming").value
        var xingming2 = document.getElementById("xingming2")
        xingmingPD.test(xingmingVal) == true ? xingming2.innerHTML = "√" : xingming2.innerHTML = "X"
    }
    shenfenzheng.onblur = function () {
        var shenfenzhengPD = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
        var shenfenzhengVal = document.getElementById("shenfenzheng").value
        var shenfenzheng2 = document.getElementById("shenfenzheng2")
        shenfenzhengPD.test(shenfenzhengVal) == true ? shenfenzheng2.innerHTML = "√" : shenfenzheng2.innerHTML = "X"
    }

    function qingkong() {
        username.value = ''
        shoujihao.value = ''
        xingming.value = ''
        shenfenzheng.value = ''
        mima.value = ''
        queren.value = ''
        username2.innerHTML = ""
        mima2.innerHTML = ""
        queren2.innerHTML = ""
        shoujihao2.innerHTML = ""
        xingming2.innerHTML = ""
        shenfenzheng2.innerHTML = ""
    }

    button.onclick = function () {
        if (username2.innerHTML == "√" && mima2.innerHTML == "√" && queren2.innerHTML == "√" && shoujihao2.innerHTML == "√" && xingming2.innerHTML == "√" && shenfenzheng2.innerHTML == "√") {
            if (num == 0) {
                arr.push({ username: username.value, mima: mima.value, queren: queren.value, shoujihao: shoujihao.value, xingming: xingming.value, shenfenzheng: shenfenzheng.value })
                yemian()
                qingkong()
            } else if (num == 1) {
                arr[nums].username = username.value
                arr[nums].shoujihao = shoujihao.value
                arr[nums].xingming = xingming.value
                arr[nums].shenfenzheng = shenfenzheng.value
                arr[nums].mima = mima.value
                arr[nums].queren = queren.value
                yemian()
                qingkong()
                num = 0
            }
        } else {
            alert('请输入正确的格式')
        }
    }
    function shanchu(i) {

        if (confirm("是否确认删除")) {
            arr.splice(i, 1)
            yemian()
            qingkong()
            alert('删除成功')
        } else {
            alert('删除已取消')
        }

    }

    function chakan(i) {
        var html = ""
        html += `<tr>
                        <td>${arr[i].username}</td>
                        <td>${arr[i].shoujihao}</td>
                        <td>${arr[i].xingming}</td>
                        <td>${arr[i].shenfenzheng}</td>
                    </tr>`
        document.getElementsByTagName('table')[3].innerHTML = html
        document.getElementById('mubu').style.display = 'block'
        document.getElementById('div1').style.display = 'block'
    }

    mubu.onclick = function () {
        document.getElementById('div1').style.display = 'none'
        document.getElementById('mubu').style.display = 'none'
    }

    function xiugai(i) {
        num = 1
        nums = i
        username.value = arr[i].username
        shoujihao.value = arr[i].shoujihao
        xingming.value = arr[i].xingming
        shenfenzheng.value = arr[i].shenfenzheng
        mima.value = arr[i].mima
        queren.value = arr[i].queren
    }

    function yemian() {
        var html = ""
        for (i in arr) {
            html += `<tr>
                        <td>${arr[i].username}</td>
                        <td>${arr[i].shoujihao}</td>
                        <td>${arr[i].xingming}</td>
                        <td>${arr[i].shenfenzheng}</td>
                        <td>
                            <a href="#" onclick="shanchu(${i})">删除</a>
                            <a href="#" onclick="xiugai(${i})">修改</a>
                            <a href="#" onclick="chakan(${i})">查看</a>
                        </td>
                    </tr>`
        }
        document.getElementById('table').innerHTML = html
    }
</script>
<style>
    #inputs {
        float: left;
    }

    #wenzi {
        float: left;
        width: 80px;
        height: 45px;
    }

    #wenzi span {
        float: right;
        padding: 5px 0px;
    }

    #inputs input {
        margin: 5px 0px;
    }

    #box {
        width: 280px;
        height: 270px;
        margin: auto;
    }

    #buttons {
        width: 100px;
        height: 35px;
        margin: auto;
    }

    #buttons button {
        margin-top: 23px;
        width: 100px;
        height: 35px;
    }

    td {
        width: 180px;
        height: 45px;
        border: 1px solid #000;
        text-align: center;
    }

    #mubu {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .5);
        display: none;
    }

    #div1 {
        width: 800px;
        height: 500px;
        background: #fff;
        text-align: center;
        display: none;
        position: absolute;
        top: 20%;
        left: 40%;
        z-index: 9999999;
        overflow: scroll;
    }
</style>

</html>