本文详细解析使用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>以上就是本文的全部内容,希望能为读者的学习提供有益帮助,欢迎大家继续支持本站。