javascript實現(xiàn)用戶管理系統(tǒng)
更新時間：2022年06月16日 15:02:46 作者：張超帥
這篇文章主要為大家詳細介紹了javascript實現(xiàn)用戶管理系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了javascript實現(xiàn)用戶管理系統(tǒng)的具體代碼，供大家參考，具體內(nèi)容如下
一些知識點梳理：
1.獲取ta1表格中的某行某列的元素
document.getElementById("ta1").rows[hangshu].cells[0].innerHTML=document.getElementById("username1").value;2.當有多個div界面時要注意設(shè)置層疊關(guān)系，display=”none”不顯示，display=”block”顯示。z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。所以當你要跳轉(zhuǎn)div時，設(shè)置要跳轉(zhuǎn)的div堆疊順序更高，關(guān)閉時讓其堆疊順序低，主界面高就行啦。
document.getElementById("div2").style.display="block";
document.getElementById("div2").style.zIndex="101";3.由于javascript不支持二維數(shù)組，所以只能用一位數(shù)組，定義如下
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.往一維數(shù)組中添加元素
usernamearr.push(arradd[0]);
6.往表格中插入標簽，此處為a標簽。href可以用#,點擊事件為onclick()。td8為某行中的一個列即一個單元格。
td8.innerHTML="<a href='javascript:;' onclick='deleteCurrentRow(this);'>刪除</a>";
7.javascript中還可以設(shè)置單元格的樣式
td1.style.textAlign="center";
8.文本框當失去焦點時就會觸發(fā)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.有時候需要使用靈活，比如這個用戶系統(tǒng)打開已經(jīng)寫死了三行，這時候新增的話是從第四行開始的了。當然這也有弊病如果先刪除一些行的話就會出錯。
//定義一個變量i為計算的次數(shù)。從3開始每次新增用戶就加一 var i=2; --- //行數(shù)加一 i=i+1; --- td9.innerHTML="<a href='javascript:;' onclick='openxiugai(i);'>修改</a>";
10.利用一些隱藏按鈕來傳遞參數(shù)
<input type="hidden" id="hang">
-----
var hangshu=document.getElementById("hang").value;11.insertRow(-1)表示插入到表格的最后一行。當然你也可以指定行。insertCell()插入到某一行的某一列。appendChild() 方法向節(jié)點添加最后一個子節(jié)點。
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>用戶管理系統(tǒng)</title>
<style>
? ? #div1{/*<!-- 用戶管理系統(tǒng)界面 ?-->*/
? ? ? ? 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 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。-->*/
? ? ? ? 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是添加用戶的界面，首先應(yīng)該設(shè)置它的堆疊順序比div2用戶管理系統(tǒng)界面低，所以div1顯示在底層不會被看到 -->*/
? ? ? ? z-index:97; /*<!--z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。-->*/
? ? ? ? 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是添加用戶的界面，首先應(yīng)該設(shè)置它的堆疊順序比div2用戶管理系統(tǒng)界面低，所以div1顯示在底層不會被看到 -->*/
? ? ? ? z-index:97; /*<!--z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。-->*/
? ? ? ? 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 = "英文數(shù)字或者下劃線".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 = "英文數(shù)字或者下劃線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 = "英文數(shù)字或者下劃線".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 = "英文數(shù)字或者下劃線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為計算的次數(shù)。從3開始每次新增用戶就加一
? ? var i=2;
? ? //用戶管理系統(tǒng)新增一行
? ? 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();
? ? ? ? ? ? //行數(shù)加一
? ? ? ? ? ? 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>用戶管理系統(tǒng)</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="關(guān)閉" 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="關(guān)閉" onClick="closexiugai();">
? ? </div>
</body>
</html>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進行控制的實現(xiàn)代碼
這篇文章主要介紹了小程序批量監(jiān)聽輸入框?qū)Π粹o樣式進行控制的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)客服消息自動回復(fù)圖片消息，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
JS與Jquery獲取屏幕、瀏覽器、頁面的寬度和高度對比整理
頁面的展示，從外到內(nèi)的容器為：屏幕、瀏覽器以及頁面本身。HTML元素展現(xiàn)在頁面內(nèi)，頁面展現(xiàn)在瀏覽器內(nèi)，而瀏覽器展現(xiàn)在屏幕內(nèi)。通過Js的一些對象可以獲取這些容器的高度、寬度。容器的尺寸是指當前分辨率下的高度和寬度（分辨率不同，值就不相同）。2023-02-02
這篇文章主要為大家詳細介紹了一個簡易的js圖片輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
超實用的全新JavaScript事件Scrollend實例詳解
這篇文章主要為大家介紹了超實用的全新JavaScript事件Scrollend實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家詳細介紹了用webAPI實現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
在一些瀏覽器里已經(jīng)可以使用web api調(diào)用攝像頭功能了,下面這篇文章主要給大家介紹了關(guān)于如何利用js給自己照相并修圖的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了JS延時提示框?qū)崿F(xiàn)方法,以實例形式較為詳細的分析了JavaScript實現(xiàn)延時提示功能的原理與具體實現(xiàn)步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
在JavaScript中,異步操作是非常常見的,如網(wǎng)絡(luò)請求、文件操作、定時任務(wù)等,Promise是一種用于管理異步操作的解決方案,它使得異步代碼變得更易讀、易于組合和錯誤處理更加集中,本文將詳細介紹如何使用Promise進行錯誤處理,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了JS實現(xiàn)可用滑塊滑動的緩動圖代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09