javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js用户管理系统

javascript实现用户管理系统

作者：张超帅

这篇文章主要为大家详细介绍了javascript实现用户管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了javascript实现用户管理系统的具体代码，供大家参考，具体内容如下

一些知识点梳理：

1.获取ta1表格中的某行某列的元素

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

2.当有多个div界面时要注意设置层叠关系，display=”none”不显示，display=”block”显示。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。所以当你要跳转div时，设置要跳转的div堆叠顺序更高，关闭时让其堆叠顺序低，主界面高就行啦。

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

3.由于javascript不支持二维数组，所以只能用一位数组，定义如下

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

4.删除表格中的某行

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

5.往一维数组中添加元素

usernamearr.push(arradd[0]);

6.往表格中插入标签，此处为a标签。href可以用#,点击事件为onclick()。td8为某行中的一个列即一个单元格。

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

7.javascript中还可以设置单元格的样式

td1.style.textAlign="center";

8.文本框当失去焦点时就会触发onblur事件，checkcard去判断输入的是否满足正则表达式。span标签等下利用id写出到它的innerHTML，就是我们看到的格式不对之类的提示。

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

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

9.有时候需要使用灵活，比如这个用户系统打开已经写死了三行，这时候新增的话是从第四行开始的了。当然这也有弊病如果先删除一些行的话就会出错。

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

10.利用一些隐藏按钮来传递参数

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

11.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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文