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>
相关文章
Chynna
2021-04-13
Tallulah
2021-08-02
Viridis
2023-05-18
Oria
2023-07-17
Malina
2023-07-20
Iria
2023-07-20
Bianca
2023-07-20
Kohana
2023-07-20
Hellens
2023-07-20
Rayna
2023-07-20
Angie
2023-07-20
Edie
2023-07-20
Radinka
2023-07-20
Tesia
2023-07-20
Winola
2023-07-20
Maha
2023-07-20
Jacuqeline
2023-07-20