JavaScript实现简易用户管理系统:DOM操作与界面交互详解

作者:像素漫游时间:2026-10-25 12:34:48浏览:587

本文详细解析使用JavaScript构建简易用户管理系统的核心实现。内容涵盖通过DOM API动态获取表格单元格数据、利用一维数组模拟二维数据存储、以及实现表格行的动态插入与删除。同时介绍了通过CSS z-index属性控制多Div界面的显示层级,结合onblur事件与正则表达式进行表单验证,并利用隐藏域和insertRow方法完成数据的持久化交互与页面状态管理。

本文分享了一个使用JavaScript编写的简易用户管理系统的具体实现方案,供读者参考学习。

在开发过程中,涉及以下几个关键技术点的梳理:

首先,需要掌握如何获取HTML表格(如ID为ta1)中特定行和列的元素节点。

document.getElementById("ta1").rows[hangshu].cells[0].innerHTML=document.getElementById("username1").value;

其次,当页面中存在多个Div界面时,必须合理设置层叠关系。通过CSS属性display控制元素的显示与隐藏(display="none"表示隐藏,display="block"表示显示),并利用z-index属性设定元素的堆叠顺序。堆叠顺序数值越高的元素会显示在数值较低元素的前方。因此,在切换Div界面时,应将目标Div的z-index设置为较高值,关闭时将其降低,而主界面的z-index应保持最高以确保可见性。

document.getElementById("div2").style.display="block";
document.getElementById("div2").style.zIndex="101";

第三,由于JavaScript原生不支持二维数组,通常采用一维数组来模拟存储数据。定义方式如下:

var usernamearr=new Array("shanbaba","shangege","shandawang");

第四,实现从表格中删除指定行的功能。

function deleteCurrentRow(obj){  
        var tr=obj.parentNode.parentNode;  
        var tbody=tr.parentNode;  
        tbody.removeChild(tr);  
        //只剩行首时删除表格  
        if(tbody.rows.length==1) {  
            tbody.parentNode.removeChild(tbody);  
        }  
    } 

第五,演示如何向一维数组中添加新元素。

usernamearr.push(arradd[0]);

第六,讲解如何在表格单元格中插入HTML标签,例如a标签。可以通过设置href为"#"并绑定onclick事件来实现点击交互。以下代码展示了如何向表格的特定列(td8)插入内容:

td8.innerHTML="<a href='javascript:;' onclick='deleteCurrentRow(this);'>删除</a>";

第七,JavaScript还支持动态设置单元格的样式,例如对齐方式等。

td1.style.textAlign="center";

第八,利用文本框的onblur事件(失去焦点时触发)进行数据校验。通过checkcard函数判断输入内容是否符合正则表达式要求,并将错误提示通过span标签的innerHTML属性动态显示出来,例如显示格式错误的红色警告。

<td align="left"><input type="text" id="Card" onblur="checkcard()"><span id="cardId"></span></td>

spancard.innerHTML = "格式不对".fontcolor("red");

第九,在实际应用中需保持灵活性。例如,若用户管理系统界面默认已预置三行数据,新增用户时应从第四行开始插入。需注意,若先执行删除操作再新增,可能会导致行号计算错误,因此需妥善处理行号逻辑。

//定义一个变量i为计算的次数。从3开始每次新增用户就加一
var i=2;
---
//行数加一
i=i+1;
---
td9.innerHTML="<a href='javascript:;' onclick='openxiugai(i);'>修改</a>";

第十,利用隐藏按钮或隐藏域来传递参数。

<input type="hidden" id="hang">
-----
var hangshu=document.getElementById("hang").value;

第十一,介绍表格行的动态插入方法。insertRow(-1)表示将新行插入到表格的最后一行,也可指定具体行号;insertCell()用于在指定行中插入列;appendChild()方法用于向节点添加最后一个子节点。

var tableadd=document.getElementById("ta1");
var tradd=tableadd.insertRow(-1);
var rowlen=tableadd.rows.length;
----
var td1=tradd.insertCell();
----
tradd.appendChild(td2);

以下是完整的系统代码实现:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户管理系统</title>
<style>


    #div1{/*<!-- 用户管理系统界面  -->*/
        position:fixed;
        _position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background:#fff;
        opacity:10;
        filter:alpha(opacity=50);

        z-index:98; /*<!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->*/
        display:block;/*<!--    此元素不会被显示。-->*/
        background-color:white;
        text-align: center;
    }

        #div2{/*<!-- 添加新用户界面  -->*/
        position:fixed;
        _position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background:#fff;
        opacity:10;/*<!-- 透明度0:透明,其他不透明。100完全不透明-->*/
        filter:alpha(opacity=50);
        /*<!-- div1是添加用户的界面,首先应该设置它的堆叠顺序比div2用户管理系统界面低,所以div1显示在底层不会被看到 -->*/
        z-index:97; /*<!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->*/
        display:block;/*<!--    此元素不会被显示。-->*/
        background-color:white;
        text-align: center;
    }

        #div3{/*<!-- 修改界面  -->*/
        position:fixed;
        _position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background:#fff;
        opacity:10;/*<!-- 透明度0:透明,其他不透明。100完全不透明-->*/
        filter:alpha(opacity=50);
        /*<!-- div1是添加用户的界面,首先应该设置它的堆叠顺序比div2用户管理系统界面低,所以div1显示在底层不会被看到 -->*/
        z-index:97; /*<!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。-->*/
        display:block;/*<!--    此元素不会被显示。-->*/
        background-color:white;
        text-align: center;
    }


</style>
</head>

<script type="text/javascript">


    var usernamearr=new Array("shanbaba","shangege","shandawang");
    var passarr=new Array("ddddddd","ddddddd","ddddddd");
    var namearr=new Array("山爸爸","山哥哥","山大王");
    var emailarr=new Array("958786497@qq.com","958786497@qq.com","958786497@qq.com");
    var phonearr=new Array("18813290000","18813290000","18813290000");
    var qqarr=new Array("958989898","958989898","958989898");
    var cardarr=new Array("440222199602033030","440222199602033030","440222199602033030");

     function deleteCurrentRow(obj){  
        var tr=obj.parentNode.parentNode;  
        var tbody=tr.parentNode;  
        tbody.removeChild(tr);  
        //只剩行首时删除表格  
        if(tbody.rows.length==1) {  
            tbody.parentNode.removeChild(tbody);  
        }  
    } 


    //新增界面的正则表达式
    function checkuser(){
        //用户名
        var inputuser=document.getElementById("username");
        var spanuser=document.getElementById("userId");
        var usercontent=inputuser.value;
        var reguser=/^[a-z]\w{3,}$/i;
        if(reguser.test(usercontent)){
            spanuser.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanuser.innerHTML = "英文数字或者下划线".fontcolor("red");
            return false;
        }
    }

    function checkname(){
        //姓名
        var inputname=document.getElementById("Name");
        var spanname=document.getElementById("nameId");
        var namecontent=inputname.value;
        var regname=/^[\u0391-\uFFE5]+$/;
        if(regname.test(namecontent)){
            spanname.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanname.innerHTML = "必须填入中文".fontcolor("red");
            return false;
        }
    }

    function checkpass(){
        //密码
        var inputpass=document.getElementById("Password");
        var spanpass=document.getElementById("passId");
        var passcontent=inputpass.value;
        var regpass=/[a-z0-9]{6,}/;

        if(regpass.test(passcontent)){
            spanpass.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanpass.innerHTML = "英文数字或者下划线6位以上".fontcolor("red");
            return false;
        }
    }

    function checkemail(){
        //邮箱
        var inputemail=document.getElementById("Email");
        var spanemail=document.getElementById("emailId");
        var emailcontent=inputemail.value;
        var regemail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(regemail.test(emailcontent)){
            spanemail.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanemail.innerHTML = "格式不对".fontcolor("red");
            return false;
        }
    }

    function checkphone(){
        //电话
        var inputphone=document.getElementById("Phone");
        var spanphone=document.getElementById("phoneId");
        var phonecontent=inputphone.value;
        var regphone=/^(0?[1-9]{2,3}-?)?[1-9]\d{6,7}(-\d{1,4})?$/;
        if(regphone.test(phonecontent)){
            spanphone.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanphone.innerHTML = "格式不对".fontcolor("red");
            return false;
        }
    }

    function checkqq(){
        //QQ
        var inputQQ=document.getElementById("QQ");
        var spanQQ=document.getElementById("qqId");
        var qqcontent=inputQQ.value;
        var regQQ=/^[1-9]\d{4,8}$/;
        if(regQQ.test(qqcontent)){
            spanQQ.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanQQ.innerHTML = "格式不对".fontcolor("red");
            return false;
        }
    }

    function checkcard(){
        //身份证
        var inputcard=document.getElementById("Card");
        var spancard=document.getElementById("cardId");
        var cardcontent=inputcard.value;
        var regcard=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        if(regcard.test(cardcontent)){
            spancard.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spancard.innerHTML = "格式不对".fontcolor("red");
            return false;
        }
    }


    //修改界面的正则表达式检测
    function checkuser1(){
        //用户名
        var inputuser=document.getElementById("username1");
        var spanuser=document.getElementById("userId1");
        var usercontent=inputuser.value;
        var reguser=/^[a-z]\w{3,}$/i;
        if(reguser.test(usercontent)){
            spanuser.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanuser.innerHTML = "英文数字或者下划线".fontcolor("red");
            return false;
        }
    }

    function checkname1(){
        //姓名
        var inputname=document.getElementById("Name1");
        var spanname=document.getElementById("nameId1");
        var namecontent=inputname.value;
        var regname=/^[\u0391-\uFFE5]+$/;
        if(regname.test(namecontent)){
            spanname.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanname.innerHTML = "必须填入中文".fontcolor("red");
            return false;
        }
    }

    function checkpass1(){
        //密码
        var inputpass=document.getElementById("Password1");
        var spanpass=document.getElementById("passId1");
        var passcontent=inputpass.value;
        var regpass=/[a-z0-9]{6,}/;

        if(regpass.test(passcontent)){
            spanpass.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanpass.innerHTML = "英文数字或者下划线6位以上".fontcolor("red");
            return false;
        }
    }

    function checkemail1(){
        //邮箱
        var inputemail=document.getElementById("Email1");
        var spanemail=document.getElementById("emailId1");
        var emailcontent=inputemail.value;
        var regemail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(regemail.test(emailcontent)){
            spanemail.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanemail.innerHTML = "格式不对".fontcolor("red");
            return false;
        }
    }

    function checkphone1(){
        //电话
        var inputphone=document.getElementById("Phone1");
        var spanphone=document.getElementById("phoneId1");
        var phonecontent=inputphone.value;
        var regphone=/^(0?[1-9]{2,3}-?)?[1-9]\d{6,7}(-\d{1,4})?$/;
        if(regphone.test(phonecontent)){
            spanphone.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanphone.innerHTML = "格式不对".fontcolor("red");
            return false;
        }
    }

    function checkqq1(){
        //QQ
        var inputQQ=document.getElementById("QQ1");
        var spanQQ=document.getElementById("qqId1");
        var qqcontent=inputQQ.value;
        var regQQ=/^[1-9]\d{4,8}$/;
        if(regQQ.test(qqcontent)){
            spanQQ.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spanQQ.innerHTML = "格式不对".fontcolor("red");
            return false;
        }
    }

    function checkcard1(){
        //身份证
        var inputcard=document.getElementById("Card1");
        var spancard=document.getElementById("cardId1");
        var cardcontent=inputcard.value;
        var regcard=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        if(regcard.test(cardcontent)){
            spancard.innerHTML = "正确".fontcolor("green");
            return true;
        }else{
            spancard.innerHTML = "格式不对".fontcolor("red");
            return false;
        }
    }

    //定义一个变量i为计算的次数。从3开始每次新增用户就加一
    var i=2;
    //用户管理系统新增一行
    function addrow(){
        if(checkuser()&&checkname()&&checkpass()&&checkemail()&&checkphone()&&checkqq()&&checkcard()){
            var tableadd=document.getElementById("ta1");
            var tradd=tableadd.insertRow(-1);
            var rowlen=tableadd.rows.length;
            //alert(rowlen);
            //tradd.id=(rowlen);

            var td1=tradd.insertCell();
            var td2=tradd.insertCell();
            var td3=tradd.insertCell();
            var td4=tradd.insertCell();
            var td5=tradd.insertCell();
            var td6=tradd.insertCell();
            var td7=tradd.insertCell();
            var td8=tradd.insertCell();
            var td9=tradd.insertCell();

            //行数加一
            i=i+1;
            td1.innerHTML=document.getElementById("username").value;
            td2.innerHTML=document.getElementById("Name").value;
            td3.innerHTML=document.getElementById("Password").value;
            td4.innerHTML=document.getElementById("Email").value;
            td5.innerHTML=document.getElementById("Phone").value;
            td6.innerHTML=document.getElementById("QQ").value;
            td7.innerHTML=document.getElementById("Card").value;

            var arradd=new Array(7);
            arradd[0]=td1.innerHTML;
            arradd[1]=td2.innerHTML;
            arradd[2]=td3.innerHTML;
            arradd[3]=td4.innerHTML;
            arradd[4]=td5.innerHTML;
            arradd[5]=td6.innerHTML;
            arradd[6]=td7.innerHTML;

            usernamearr.push(arradd[0]);
            passarr.push(arradd[1]);
            namearr.push(arradd[2]);
            emailarr.push(arradd[3]);
            phonearr.push(arradd[4]);
            qqarr.push(arradd[5]);
            cardarr.push(arradd[6]);


            td8.innerHTML="<a href='javascript:;' onclick='deleteCurrentRow(this);'>删除</a>";
            td9.innerHTML="<a href='javascript:;' onclick='openxiugai(i);'>修改</a>";

            td1.style.textAlign="center";
            td2.style.textAlign="center";
            td3.style.textAlign="center";
            td4.style.textAlign="center";
            td5.style.textAlign="center";
            td6.style.textAlign="center";
            td7.style.textAlign="center";
            td8.style.textAlign="center";
            td9.style.textAlign="center";

            tradd.appendChild(td2);
            tradd.appendChild(td3);
            tradd.appendChild(td4);
            tradd.appendChild(td5);
            tradd.appendChild(td6);
            tradd.appendChild(td7);
            tradd.appendChild(td8);
            tradd.appendChild(td9);

        }
    }

    function OpenDiv(){
        document.getElementById("div2").style.display="block";
        document.getElementById("div2").style.zIndex="101";

    }   

    function CloseDiv2(){
        document.getElementById("div2").style.display="none";
        document.getElementById("div2").style.zIndex="2";
    }

    function openxiugai(hang){
        document.getElementById("div3").style.display="block";
        document.getElementById("div3").style.zIndex="100";

        document.getElementById("username1").value=usernamearr[hang];
        document.getElementById("Password1").value=passarr[hang];
        document.getElementById("Name1").value=namearr[hang];
        document.getElementById("Email1").value=emailarr[hang];
        document.getElementById("Phone1").value=phonearr[hang];
        document.getElementById("QQ1").value=qqarr[hang];
        document.getElementById("Card1").value=cardarr[hang];

        document.getElementById("hang").value=hang+1;
    }

    function closexiugai(){
        document.getElementById("div3").style.display="none";
        document.getElementById("div3").style.zIndex="0";
        document.getElementById("div1").style.display="block";
        document.getElementById("div1").style.zIndex="100";

    }

    function xiugai(){
        var hangshu=document.getElementById("hang").value;
        //alert(hangshu);
        //var x=document.getElementById("ta1").rows[hangshu].cells;
        //alert(x[0].innerHTML);
        if(checkuser1()&&checkname1()&&checkpass1()&&checkemail1()&&checkphone1()&&checkcard1()&&checkqq1()){
            document.getElementById("ta1").rows[hangshu].cells[0].innerHTML=document.getElementById("username1").value;
            document.getElementById("ta1").rows[hangshu].cells[1].innerHTML=document.getElementById("Password1").value;
            document.getElementById("ta1").rows[hangshu].cells[2].innerHTML=document.getElementById("Name1").value;
            document.getElementById("ta1").rows[hangshu].cells[3].innerHTML=document.getElementById("Email1").value;
            document.getElementById("ta1").rows[hangshu].cells[4].innerHTML=document.getElementById("Phone1").value;
            document.getElementById("ta1").rows[hangshu].cells[5].innerHTML=document.getElementById("QQ1").value;
            document.getElementById("ta1").rows[hangshu].cells[6].innerHTML=document.getElementById("Card1").value;
        }

    }

</script>
<body>
    <div id="div1" align="center">
        <center>
            <h2>用户管理系统</h2>
            <h4>用户列表</h4>
            <p><input type="button" onclick="OpenDiv();" value="添加新用户"/></p>

            <table border="1" width="70%" id="ta1">
                    <tr bgcolor="#CFCFCF" >
                    <td align="center">用户名</td>
                    <td align="center">密码</td>
                    <td align="center">姓名</td>
                    <td align="center">邮箱</td>
                    <td align="center">电话</td>
                    <td align="center">qq</td>
                    <td align="center">身份证号</td>
                    <td colspan="2" align="center">操作</td>

                </tr>

                <tr id="tr1">
                    <td id="td1" align="center">shanbaba</td>
                    <td align="center">ddddddd</td>
                    <td align="center">山爸爸</td>
                    <td align="center">958786497@qq.com</td>
                    <td align="center">18813290000</td>
                    <td align="center">958989898</td>
                    <td align="center">440222199602033030</td>
                    <td align="center"> <a href="javascript:;" onclick="deleteCurrentRow(this);" id="a1" >删除</a>  </td>
                    <td align="center"><a href="javascript:;" onclick="openxiugai(0);" id="0">修改</a></td>
                </tr>
                <tr>
                    <td align="center">sahngege</td>
                    <td align="center">ddddddd</td>
                    <td align="center">山哥哥</td>
                    <td align="center">958786497@qq.com</td>
                    <td align="center">18813290000</td>
                    <td align="center">958989898</td>
                    <td align="center">440222199602033030</td>
                    <td align="center"> <a href="javascript:;" onclick="deleteCurrentRow(this);">删除</a></td>
                    <td align="center"><a href="javascript:;" onclick="openxiugai(1);" id="1">修改</a></td>
                </tr>
                <tr>
                    <td align="center">shandawang</td>
                    <td align="center">ddddddd</td>
                    <td align="center">山大王</td>
                    <td align="center">958786497@qq.com</td>
                    <td align="center">18813290000</td>
                    <td align="center">958989898</td>
                    <td align="center">440222199602033030</td>
                    <td align="center"> <a href="javascript:;" onclick="deleteCurrentRow(this);">删除</a>  </td>
                    <td align="center"><a href="javascript:;" onclick="openxiugai(2);" id="2">修改</a></td>
                </tr>

            </table>
        </center>
    </div>

    <div id="div2">
        <form name="theForm" id="demo" action="" method="get" > 
            <table border="1px" width="50%" cellspacing="0px" cellpadding="3px" align="center">

                <tr>
                    <td width="25%">用户名:</td>
                    <td align="left"><input type="text" id="username" onblur="checkuser()"><span id="userId"></span></td>
                </tr>

                <tr>
                    <td width="25%">密码:</td>
                    <td align="left"><input type="text" id="Password" onblur="checkpass()"><span id="passId"></span></td>
                </tr>   
                <tr>
                    <td width="25%">姓名:</td>
                    <td align="left"><input type="text" id="Name" onblur="checkname()"><span id="nameId"></span></td>
                </tr>           
                <tr>
                    <td width="25%">邮箱:</td>
                    <td align="left"><input type="text" id="Email" onblur="checkemail()"><span id="emailId"></span></td>
                </tr>   

                <tr>
                    <td width="25%">电话:</td>
                    <td align="left"><input type="text" id="Phone" onblur="checkphone()"><span id="phoneId"></span></td>
                </tr>   

                <tr>
                    <td width="25%">QQ:</td>
                    <td align="left"><input type="text" id="QQ" onblur="checkqq()"><span id="qqId"></span></td>
                </tr>   

                <tr>
                    <td width="25%">身份证:</td>
                    <td align="left"><input type="text" id="Card" onblur="checkcard()"><span id="cardId"></span></td>
                </tr>   

                <tr>
                <td colspan="2"><input type="button" value="确定提交" onClick="addrow()"></td>
                </tr> 

                </table>
               </form>
                    <input type="button" value="关闭" onClick="CloseDiv2();">

    </div>

    <div id="div3">
        <form name="theForm" id="demo1" action="" method="get" >    
            <table border="1px" width="50%" cellspacing="0px" cellpadding="3px" align="center">

                <tr>
                    <td width="25%">用户名:</td>
                    <td align="left"><input type="text" id="username1" onblur="checkuser1()"><span id="userId1"></span></td>
                </tr>
                <tr>
                    <td width="25%">密码:</td>
                    <td align="left"><input type="text" id="Password1" onblur="checkpass1()"><span id="passId1"></span></td>
                </tr>
                <tr>
                    <td width="25%">姓名:</td>
                    <td align="left"><input type="text" id="Name1" onblur="checkname1()"><span id="nameId1"></span></td>
                </tr>           
                <tr>
                    <td width="25%">邮箱:</td>
                    <td align="left"><input type="text" id="Email1" onblur="checkemail1()"><span id="emailId1"></span></td>
                </tr>   

                <tr>
                    <td width="25%">电话:</td>
                    <td align="left"><input type="text" id="Phone1" onblur="checkphone1()"><span id="phoneId1"></span></td>
                </tr>   
                <tr>
                    <td width="25%">QQ:</td>
                    <td align="left"><input type="text" id="QQ1" onblur="checkqq1()"><span id="qqId1"></span></td>
                </tr>   

                <tr>
                    <td width="25%">身份证:</td>
                    <td align="left"><input type="text" id="Card1" onblur="checkcard1()"><span id="cardId1"></span></td>
                </tr>   
            <input type="hidden" id="hang">

                <tr>
                <td colspan="2"><input type="button" value="确定提交" onClick="xiugai();"></td>
                </tr> 

                </table>
               </form>
                   <input type="button" value="关闭" onClick="closexiugai();">

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

以上就是本文的全部内容,希望能为读者的学习提供有益帮助,欢迎大家继续支持本站。

作者最新文章