基于javascript的用户管理系统
来源：互联网 发布：3d人物软件 编辑：程序博客网 时间：2024/05/16 02:01
一些知识点梳理：
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>阅读全文
0 0
- 基于javascript的用户管理系统
- 基于Spring+JDBC的用户管理系统
- 完全基于Servlet的简单用户管理系统
- 基于Hibernate和Struts2的用户管理系统小案例
- 基于用户行为的数据分析与挖掘+分布式日志管理系统
- JSP+Servlet培训班作业管理系统[13] -使用基于Action的后端(用户登录为例)
- 客户（用户）管理系统---基于数据库javaweb的增删改查
- 基于XML的简单用户管理
- Oracle 基于用户管理恢复的处理
- -- Oracle 基于用户管理恢复的处理
- 基于用户管理的备份与恢复
- Oracle 基于用户管理的不完全恢复
- Oracle基于用户管理的不完全恢复
- Oracle基于用户管理的不完全恢复
- Oracle 基于用户管理恢复的处理
- 基于用户管理的同机数据库克隆
- ORALCE基于用户管理恢复的处理
- 基于LDAP的用户管理数据结构
- 深度解析卷积神经网络的实现细节
- C的单双引
- codeforces 882C Hacker, pack your bags!
- C语言结构struct的内存对齐
- 20170704Windows10_08_临界区、线程静态变量、Slim锁、线程状态
- 基于javascript的用户管理系统
- CentOS6禁用IPv6
- 利用python批处理改变文件名字
- python paramiko的安装与使用
- 统计素数并求和 / 求奇数和
- Centos 6.5卸载mysql
- 技术历史——Spring发展历程总结
- Arch Linux中文输入法配置
- 限流方案
