标签：
要求如下：
写一个html页面，里面有一个表格，储存用户信息，包括：用户名，密码，姓名，邮箱，电话，qq，身份证号。
现在要通过js对表格进行动态的增删改查（只是内存操作即可）:
首先，加载页面时用js加载3条初始化记录；
有一个增加记录的按钮，点击后弹出一个div层提供输入，要求各字段必须符合输入格式且不能为空：
用户名：英文＋数字＋下划线；
密码：英文＋数字＋下划线＋6位以上；
姓名：中文；
邮箱，电话，qq，身份证号符合格式；
每条记录有修改、删除；
修改类似增加，要把原来值读出来；
HTML页面代码：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title>js增删改 v1.0</title> 5 <script src="js/test.js" type="text/javascript" charset="utf-8"></script> 6 </head> 7 <body > 8 <center> 9 <br/><br/> 10 <h2>js增删改 v1.0</h2> 11 <br/><br/> 12 <a href="javascript:showAddInput();">添加数据</a> 13 <br/><br/> 14 <div class="table" > 15 <table border="1" style="text-align:center" id="table"> 16 <tr> 17 <th>用户名</th> 18 <th>密码</th> 19 <th>姓名</th> 20 <th>邮箱</th> 21 <th>电话</th> 22 <th>qq</th> 23 <th>身份证号</th> 24 <th>操作</th> 25 </tr> 26 <tr> 27 <td>A1</td> 28 <td>123</td> 29 <td>a</td> 30 <td>a@qq.com</td> 31 <td>123456789</td> 32 <td>40040044</td> 33 <td>270205197405213513</td> 34 <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);" >修改<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td> 35 </tr> 36 <tr> 37 <td>A2</td> 38 <td>456</td> 39 <td>b</td> 40 <td>b@qq.com</td> 41 <td>987654321</td> 42 <td>30030033</td> 43 <td>470205197405213513 </td> 44 <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td> 45 </tr> 46 <tr> 47 <td>A3</td> 48 <td>789</td> 49 <td>c</td> 50 <td>c@qq.com</td> 51 <td>800800820</td> 52 <td>30030030</td> 53 <td>570205197405213513 </td> 54 <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td> 55 </tr> 56 </table> 57 </div> 58 59 <div style="display:none" id="addinfo"> 60 <form> 61 <br> 62 用户名:（用户名只能用英文+数字或下划线）<br><input type="text" id="username" /><br><!--限制用户名只能用英文 下划线 或数字--> 63 密码:（英文+数字或下划线，长度不小于6）<br><input type="text" id="password"/><br> 64 姓名:（只能是汉字）<br><input type="text" id="name"/><br> 65 邮箱:<br><input type="text" id="email"/><br> 66 电话:<br><input type="text" id="phone"/><br> 67 qq:<br><input type="text" id="qq"/><br> 68 身份证:<br><input type="text" id="uid"/><br><br> 69 <input type="button" value="提交" onclick="addInfo()" id="btn_add"> 70 <input type="button" value="提交" onclick="updateInfo()" style="display:none" id="btn_update"> 71 <input type="button" value="取消" onclick="hideAddInput()"> 72 </form> 73 </div> 74 </center> 75 </body> 76 </html>
JS如下：
1 var row = 0 ; //定义全局行数用于修改 2 var reg_email = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; //用于判断邮箱格式 3 var reg_name = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i; //用于判断用户名格式 4 var reg_chinese = /^[\u0391-\uFFE5]+$/ ; //用于判断姓名格式 5 var reg_pass = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;//用于判断密码格式 6 //----获取行号----- 7 function getRow(r){ 8 var i=r.parentNode.parentNode.rowIndex; 9 return i ; 10 } 11 //----获取行号----- 12 13 //----删除某一行----- 14 function delRow(r){ 15 document.getElementById(‘table‘).deleteRow(getRow(r)); 16 } 17 //----删除某一行----- 18 19 //----清除添加信息框的内容----- 20 function cleanAddInput(){ 21 document.getElementById(‘username‘).value=‘‘; 22 document.getElementById(‘password‘).value=‘‘; 23 document.getElementById(‘name‘).value=‘‘; 24 document.getElementById(‘email‘).value=‘‘; 25 document.getElementById(‘phone‘).value=‘‘; 26 document.getElementById(‘qq‘).value=‘‘; 27 document.getElementById(‘uid‘).value=‘‘; 28 } 29 //----清除添加信息框的内容----- 30 31 //----显示添加信息框----- 32 function showAddInput(){ 33 document.getElementById(‘addinfo‘).style="display:block-inline" ; 34 document.getElementById(‘btn_add‘).style="display:block-inline" ; 35 document.getElementById(‘btn_update‘).style="display:none" ; 36 cleanAddInput(); 37 } 38 //----显示添加信息框----- 39 40 //----隐藏添加信息框----- 41 function hideAddInput(){ 42 document.getElementById(‘addinfo‘).style="display:none" ; 43 44 } 45 //----隐藏添加信息框----- 46 47 //----判断输入框的信息是否符合要求----- 48 function judge(){ 49 //根据id获取表单信息 50 var username = document.getElementById(‘username‘).value; 51 var password = document.getElementById(‘password‘).value; 52 var name = document.getElementById(‘name‘).value; 53 var email = document.getElementById(‘email‘).value; 54 var phone = document.getElementById(‘phone‘).value; 55 var qq = document.getElementById(‘qq‘).value; 56 var uid = document.getElementById(‘uid‘).value; 57 var judge = true ; //用于判断表单信息是否符合 58 if(username==‘‘){ 59 judge = false ; 60 alert(‘请输入用户名‘); 61 }else if(password==‘‘){ 62 judge = false ; 63 alert(‘请输入密码‘); 64 }else if(name==‘‘){ 65 judge = false ; 66 alert(‘请输入姓名‘); 67 }else if(email==‘‘){ 68 judge = false ; 69 alert(‘请输入邮箱‘); 70 }else if(phone==‘‘){ 71 judge = false ; 72 alert(‘请输入电话‘); 73 }else if(qq==‘‘){ 74 judge = false ; 75 alert(‘请输入qq‘); 76 }else if(uid==‘‘){ 77 judge = false ; 78 alert(‘请输入身份证‘); 79 }else if(uid.length!=18){ 80 judge = false ; 81 alert(‘身份证应为18位，请正确填写‘); 82 }else if(qq.length<=5 &&qq.length>=13){ 83 judge = false ; 84 alert(‘请正确输入qq号码‘); 85 }else if(phone.length<3&&qq.length>12){ 86 judge = false ; 87 alert(‘请正确输入电话‘); 88 }else if(!reg_email.test(email)){ 89 judge = false ; 90 alert(‘邮箱格式不正确‘); 91 }else if(!reg_name.test(username)){ 92 judge = false ; 93 alert(‘用户名格式不正确‘); 94 }else if(!reg_chinese.test(name)){ 95 judge = false ; 96 alert(‘姓名格式不正确‘); 97 }else if((!reg_pass.test(password))||password.length<6){ 98 judge = false ; 99 alert(‘密码格式不正确‘); 100 } 101 102 return judge ; 103 } 104 //----判断输入框的信息是否符合要求----- 105 106 //----新增信息的插入方法----- 107 function insertInfo(){ 108 //根据id获取表单信息 109 var arr = new Array(); 110 arr[0] = document.getElementById(‘username‘).value; 111 arr[1] = document.getElementById(‘password‘).value; 112 arr[2] = document.getElementById(‘name‘).value; 113 arr[3] = document.getElementById(‘email‘).value; 114 arr[4] = document.getElementById(‘phone‘).value; 115 arr[5] = document.getElementById(‘qq‘).value; 116 arr[6] = document.getElementById(‘uid‘).value; 117 arr[7] ="<a style=‘text-align:center;color:blue;cursor:pointer;‘ onclick=‘updateRow(this);‘>修改</a> <a style=‘text-align:center;color:blue;cursor:pointer;‘ onclick=‘delRow(this);‘>删除</a>"; 118 var x = document.getElementById(‘table‘).insertRow(1); //获取第一行对象 119 120 for(var i=0;i<arr.length;i++){ 121 x.insertCell(i).innerHTML = arr[i] ; //用循环把每个数据插入第一行的每一列 122 } 123 124 } 125 //----新增信息的插入方法----- 126 127 //----新增信息----- 128 function addInfo(){ 129 130 if(judge()==true){ 131 alert(‘添加成功‘); 132 insertInfo(); //执行插入 133 hideAddInput(); //隐藏添加信息框 134 135 }else{ 136 alert(‘添加失败‘); 137 } 138 } 139 //----新增信息----- 140 141 142 //----根据行号修改信息----- 143 function updateRow(r){ 144 row = getRow(r); //把该行号赋值给全局变量 145 showAddInput(); //显示修改表单 146 //提交按钮替换 147 document.getElementById(‘btn_add‘).style="display:none" ; 148 document.getElementById(‘btn_update‘).style="display:block-inline" ; 149 insertInputFromQuery(queryInfoByRow(row)); 150 151 } 152 //----根据行号修改信息----- 153 154 155 //----根据行号查信息---- 156 function queryInfoByRow(r){ 157 158 var arr = new Array(); 159 for(var m=0 ; m<7;m++){ 160 arr[m] = document.getElementById(‘table‘).rows[row].cells[m].innerText; 161 } 162 return arr ; //返回该行数据 163 164 } 165 //----根据行号查信息---- 166 167 //----把查询到的信息放入修改的表单里---- 168 function insertInputFromQuery(arr){ 169 document.getElementById(‘username‘).value = arr[0]; 170 document.getElementById(‘password‘).value = arr[1]; 171 document.getElementById(‘name‘).value = arr[2]; 172 document.getElementById(‘email‘).value = arr[3]; 173 document.getElementById(‘phone‘).value = arr[4]; 174 document.getElementById(‘qq‘).value = arr[5]; 175 document.getElementById(‘uid‘).value = arr[6]; 176 177 } 178 //----把查询到的信息放入修改的表单里---- 179 180 181 function updateInfo(){ 182 if(judge()==true){ 183 alert(‘修改成功‘); 184 document.getElementById(‘table‘).deleteRow(row);//删除原来那行 185 insertInfo(); //插入修改后的值 186 hideAddInput(); //隐藏添加模块 187 }else{ 188 alert(‘修改失败‘); 189 hideAddInput(); 190 } 191 }
本人初学，学艺不精，如有错误，或不足指出，还望指出，感激不尽！！
标签：
原文地址：http://www.cnblogs.com/scnuyz/p/5791369.html
