JS对HTML表格进行增删改操作
要求如下:
写一个html页面,里面有一个表格,储存用户信息,包括:用户名,密码,姓名,邮箱,电话,qq,身份证号。
现在要通过js对表格进行动态的增删改查(只是内存操作即可):
首先,加载页面时用js加载3条初始化记录;
有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空:
用户名:英文+数字+下划线;
密码:英文+数字+下划线+6位以上;
姓名:中文;
邮箱,电话,qq,身份证号符合格式;
每条记录有修改、删除;
修改类似增加,要把原来值读出来;
HTML页面代码:
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>js增删改v1.0</title> <scriptsrc="js/test.js"type="text/javascript"charset="utf-8"></script> </head> <body> <center> <br/><br/> <h2>js增删改v1.0</h2> <br/><br/> <ahref="javascript:showAddInput();">添加数据</a> <br/><br/> <divclass="table"> <tableborder="1"style="text-align:center"id="table"> <tr> <th>用户名</th> <th>密码</th> <th>姓名</th> <th>邮箱</th> <th>电话</th> <th>qq</th> <th>身份证号</th> <th>操作</th> </tr> <tr> <td>A1</td> <td>123</td> <td>a</td> <td>a@qq.com</td> <td>123456789</td> <td>40040044</td> <td>270205197405213513</td> <td><astyle="color:blue;cursor:pointer;"onclick="updateRow(this);">修改<a> <astyle="color:blue;cursor:pointer;"onclick="delRow(this);">删除</a></td> </tr> <tr> <td>A2</td> <td>456</td> <td>b</td> <td>b@qq.com</td> <td>987654321</td> <td>30030033</td> <td>470205197405213513</td> <td><astyle="color:blue;cursor:pointer;"onclick="updateRow(this);">修改<a> <astyle="color:blue;cursor:pointer;"onclick="delRow(this);">删除</a></td> </tr> <tr> <td>A3</td> <td>789</td> <td>c</td> <td>c@qq.com</td> <td>800800820</td> <td>30030030</td> <td>570205197405213513</td> <td><astyle="color:blue;cursor:pointer;"onclick="updateRow(this);">修改<a> <astyle="color:blue;cursor:pointer;"onclick="delRow(this);">删除</a></td> </tr> </table> </div> <divstyle="display:none"id="addinfo"> <form> <br> 用户名:(用户名只能用英文+数字或下划线)<br><inputtype="text"id="username"/><br><!--限制用户名只能用英文下划线或数字--> 密码:(英文+数字或下划线,长度不小于6)<br><inputtype="text"id="password"/><br> 姓名:(只能是汉字)<br><inputtype="text"id="name"/><br> 邮箱:<br><inputtype="text"id="email"/><br> 电话:<br><inputtype="text"id="phone"/><br> qq:<br><inputtype="text"id="qq"/><br> 身份证:<br><inputtype="text"id="uid"/><br><br> <inputtype="button"value="提交"onclick="addInfo()"id="btn_add"> <inputtype="button"value="提交"onclick="updateInfo()"style="display:none"id="btn_update"> <inputtype="button"value="取消"onclick="hideAddInput()"> </form> </div> </center> </body> </html>
js代码:
varrow=0;//定义全局行数用于修改 varreg_email=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;//用于判断邮箱格式 varreg_name=/^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;//用于判断用户名格式 varreg_chinese=/^[\u0391-\uFFE5]+$/;//用于判断姓名格式 varreg_pass=/^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;//用于判断密码格式 //----获取行号----- functiongetRow(r){ vari=r.parentNode.parentNode.rowIndex; returni; } //----获取行号----- //----删除某一行----- functiondelRow(r){ document.getElementById('table').deleteRow(getRow(r)); } //----删除某一行----- //----清除添加信息框的内容----- functioncleanAddInput(){ document.getElementById('username').value=''; document.getElementById('password').value=''; document.getElementById('name').value=''; document.getElementById('email').value=''; document.getElementById('phone').value=''; document.getElementById('qq').value=''; document.getElementById('uid').value=''; } //----清除添加信息框的内容----- //----显示添加信息框----- functionshowAddInput(){ document.getElementById('addinfo').style="display:block-inline"; document.getElementById('btn_add').style="display:block-inline"; document.getElementById('btn_update').style="display:none"; cleanAddInput(); } //----显示添加信息框----- //----隐藏添加信息框----- functionhideAddInput(){ document.getElementById('addinfo').style="display:none"; } //----隐藏添加信息框----- //----判断输入框的信息是否符合要求----- functionjudge(){ //根据id获取表单信息 varusername=document.getElementById('username').value; varpassword=document.getElementById('password').value; varname=document.getElementById('name').value; varemail=document.getElementById('email').value; varphone=document.getElementById('phone').value; varqq=document.getElementById('qq').value; varuid=document.getElementById('uid').value; varjudge=true;//用于判断表单信息是否符合 if(username==''){ judge=false; alert('请输入用户名'); }elseif(password==''){ judge=false; alert('请输入密码'); }elseif(name==''){ judge=false; alert('请输入姓名'); }elseif(email==''){ judge=false; alert('请输入邮箱'); }elseif(phone==''){ judge=false; alert('请输入电话'); }elseif(qq==''){ judge=false; alert('请输入qq'); }elseif(uid==''){ judge=false; alert('请输入身份证'); }elseif(uid.length!=18){ judge=false; alert('身份证应为18位,请正确填写'); }elseif(qq.length<=5&&qq.length>=13){ judge=false; alert('请正确输入qq号码'); }elseif(phone.length<3&&qq.length>12){ judge=false; alert('请正确输入电话'); }elseif(!reg_email.test(email)){ judge=false; alert('邮箱格式不正确'); }elseif(!reg_name.test(username)){ judge=false; alert('用户名格式不正确'); }elseif(!reg_chinese.test(name)){ judge=false; alert('姓名格式不正确'); }elseif((!reg_pass.test(password))||password.length<6){ judge=false; alert('密码格式不正确'); } returnjudge; } //----判断输入框的信息是否符合要求----- //----新增信息的插入方法----- functioninsertInfo(){ //根据id获取表单信息 vararr=newArray(); arr[0]=document.getElementById('username').value; arr[1]=document.getElementById('password').value; arr[2]=document.getElementById('name').value; arr[3]=document.getElementById('email').value; arr[4]=document.getElementById('phone').value; arr[5]=document.getElementById('qq').value; arr[6]=document.getElementById('uid').value; arr[7]="<astyle='text-align:center;color:blue;cursor:pointer;'onclick='updateRow(this);'>修改</a> <astyle='text-align:center;color:blue;cursor:pointer;'onclick='delRow(this);'>删除</a>"; varx=document.getElementById('table').insertRow(1);//获取第一行对象 for(vari=0;i<arr.length;i++){ x.insertCell(i).innerHTML=arr[i];//用循环把每个数据插入第一行的每一列 } } //----新增信息的插入方法----- //----新增信息----- functionaddInfo(){ if(judge()==true){ alert('添加成功'); insertInfo();//执行插入 hideAddInput();//隐藏添加信息框 }else{ alert('添加失败'); } } //----新增信息----- //----根据行号修改信息----- functionupdateRow(r){ row=getRow(r);//把该行号赋值给全局变量 showAddInput();//显示修改表单 //提交按钮替换 document.getElementById('btn_add').style="display:none"; document.getElementById('btn_update').style="display:block-inline"; insertInputFromQuery(queryInfoByRow(row)); } //----根据行号修改信息----- //----根据行号查信息---- functionqueryInfoByRow(r){ vararr=newArray(); for(varm=0;m<7;m++){ arr[m]=document.getElementById('table').rows[row].cells[m].innerText; } returnarr;//返回该行数据 } //----根据行号查信息---- //----把查询到的信息放入修改的表单里---- functioninsertInputFromQuery(arr){ document.getElementById('username').value=arr[0]; document.getElementById('password').value=arr[1]; document.getElementById('name').value=arr[2]; document.getElementById('email').value=arr[3]; document.getElementById('phone').value=arr[4]; document.getElementById('qq').value=arr[5]; document.getElementById('uid').value=arr[6]; } //----把查询到的信息放入修改的表单里---- functionupdateInfo(){ if(judge()==true){ alert('修改成功'); document.getElementById('table').deleteRow(row);//删除原来那行 insertInfo();//插入修改后的值 hideAddInput();//隐藏添加模块 }else{ alert('修改失败'); hideAddInput(); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。