要求如下：

写一个html页面，里面有一个表格，储存用户信息，包括：用户名，密码，姓名，邮箱，电话，qq，身份证号。
现在要通过js对表格进行动态的增删改查（只是内存操作即可）:
首先，加载页面时用js加载3条初始化记录；
有一个增加记录的按钮，点击后弹出一个div层提供输入，要求各字段必须符合输入格式且不能为空：
用户名：英文＋数字＋下划线；
密码：英文＋数字＋下划线＋6位以上；
姓名：中文；
邮箱，电话，qq，身份证号符合格式；
每条记录有修改、删除；
修改类似增加，要把原来值读出来；

HTML页面代码：

 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>js增删改 v1.0</title>
     <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body >
 <center>
     <br/><br/>
     <h2>js增删改 v1.0</h2>
     <br/><br/>
     <a href="javascript:showAddInput();">添加数据</a>
     <br/><br/>
 <div class="table" >
   <table border="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><a style="color:blue;cursor:pointer;" onclick="updateRow(this);" >修改<a>&nbsp<a style="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><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a>&nbsp<a style="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><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a>&nbsp<a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td>
     </tr>
   </table>
 </div>

 <div style="display:none" id="addinfo">
 <form>
     <br>
     用户名:（用户名只能用英文+数字或下划线）<br><input type="text" id="username"  /><br><!--限制用户名只能用英文 下划线 或数字-->
     密码:（英文+数字或下划线，长度不小于6）<br><input type="text" id="password"/><br>
     姓名:（只能是汉字）<br><input type="text" id="name"/><br>
     邮箱:<br><input type="text" id="email"/><br>
     电话:<br><input type="text" id="phone"/><br>
     qq:<br><input type="text" id="qq"/><br>
     身份证:<br><input type="text" id="uid"/><br><br>
     <input type="button" value="提交" onclick="addInfo()" id="btn_add">
     <input type="button" value="提交" onclick="updateInfo()" style="display:none" id="btn_update">
     <input type="button" value="取消" onclick="hideAddInput()">
 </form>
 </div>
 </center>
 </body>
 </html>

JS如下：

 var row = 0 ;  //定义全局行数用于修改
 var reg_email = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;  //用于判断邮箱格式
 var reg_name = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i; //用于判断用户名格式
 var reg_chinese =  /^[\u0391-\uFFE5]+$/  ; //用于判断姓名格式
 var reg_pass = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;//用于判断密码格式
 //----获取行号-----
 function getRow(r){
     var i=r.parentNode.parentNode.rowIndex;
     return i ;
 }
 //----获取行号-----

 //----删除某一行-----
 function delRow(r){
     document.getElementById('table').deleteRow(getRow(r));
 }
 //----删除某一行-----

 //----清除添加信息框的内容-----
 function cleanAddInput(){
     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='';
 }
 //----清除添加信息框的内容-----

 //----显示添加信息框-----
 function showAddInput(){
     document.getElementById('addinfo').style="display:block-inline" ;
     document.getElementById('btn_add').style="display:block-inline" ;
     document.getElementById('btn_update').style="display:none" ;
     cleanAddInput();
 }
 //----显示添加信息框-----

 //----隐藏添加信息框-----
 function hideAddInput(){
     document.getElementById('addinfo').style="display:none" ;

 }
 //----隐藏添加信息框-----

 //----判断输入框的信息是否符合要求-----
 function judge(){
     //根据id获取表单信息
     var username = document.getElementById('username').value;
     var password = document.getElementById('password').value;
     var name = document.getElementById('name').value;
     var email = document.getElementById('email').value;
     var phone = document.getElementById('phone').value;
     var qq = document.getElementById('qq').value;
     var uid = document.getElementById('uid').value;
     var judge = true ;  //用于判断表单信息是否符合
     if(username==''){
         judge = false ;
         alert('请输入用户名');
     }else if(password==''){
         judge = false ;
         alert('请输入密码');
     }else if(name==''){
         judge = false ;
         alert('请输入姓名');
     }else if(email==''){
         judge = false ;
         alert('请输入邮箱');
     }else if(phone==''){
         judge = false ;
         alert('请输入电话');
     }else if(qq==''){
         judge = false ;
         alert('请输入qq');
     }else if(uid==''){
         judge = false ;
         alert('请输入身份证');
     }else if(uid.length!=18){
         judge = false ;
         alert('身份证应为18位，请正确填写');
     }else if(qq.length<=5 &&qq.length>=13){
         judge = false ;
         alert('请正确输入qq号码');
     }else if(phone.length<3&&qq.length>12){
         judge = false ;
         alert('请正确输入电话');
     }else if(!reg_email.test(email)){
         judge = false ;
         alert('邮箱格式不正确');
     }else if(!reg_name.test(username)){
         judge = false ;
         alert('用户名格式不正确');
     }else if(!reg_chinese.test(name)){
         judge = false ;
         alert('姓名格式不正确');
     }else if((!reg_pass.test(password))||password.length<6){
         judge = false ;
         alert('密码格式不正确');
     }

     return judge ;
 }
 //----判断输入框的信息是否符合要求-----

 //----新增信息的插入方法-----
 function insertInfo(){
     //根据id获取表单信息
     var arr = new Array();
     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] ="<a style='text-align:center;color:blue;cursor:pointer;' onclick='updateRow(this);'>修改</a>&nbsp<a style='text-align:center;color:blue;cursor:pointer;' onclick='delRow(this);'>删除</a>";
     var x = document.getElementById('table').insertRow(1); //获取第一行对象

     for(var i=0;i<arr.length;i++){
         x.insertCell(i).innerHTML = arr[i] ;  //用循环把每个数据插入第一行的每一列
     }

 }
 //----新增信息的插入方法-----

 //----新增信息-----
 function addInfo(){

     if(judge()==true){
         alert('添加成功');
         insertInfo();  //执行插入
         hideAddInput();  //隐藏添加信息框

     }else{
         alert('添加失败');
     }
 }
 //----新增信息-----

 //----根据行号修改信息-----
 function updateRow(r){
     row = getRow(r);   //把该行号赋值给全局变量
     showAddInput();  //显示修改表单
     //提交按钮替换
     document.getElementById('btn_add').style="display:none" ;
     document.getElementById('btn_update').style="display:block-inline" ;
     insertInputFromQuery(queryInfoByRow(row));

 }
 //----根据行号修改信息-----

 //----根据行号查信息----
 function queryInfoByRow(r){

     var arr = new Array();
     for(var m=0 ; m<7;m++){
         arr[m] = document.getElementById('table').rows[row].cells[m].innerText;
     }
     return arr ; //返回该行数据

 }
 //----根据行号查信息----

 //----把查询到的信息放入修改的表单里----
 function insertInputFromQuery(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];

 }
 //----把查询到的信息放入修改的表单里----

 function updateInfo(){
     if(judge()==true){
         alert('修改成功');
         document.getElementById('table').deleteRow(row);//删除原来那行
         insertInfo();  //插入修改后的值
         hideAddInput();  //隐藏添加模块
     }else{
         alert('修改失败');
         hideAddInput();
     }
 }

本人初学，学艺不精，如有错误，或不足指出，还望指出，感激不尽！！

JS增删改HTML表格的更多相关文章

  1. jQuery动态增删改查表格信息，可左键/右键提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js 增删改查

    <html><head lang="en"> <meta charset="UTF-8"> <title>< ...

  3. JS 增删改查操作XML

    效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  4. js 增删改查方法

    push() 向数组的末尾添加一个或多个元素 pop() 删除数组内部并返回数组的最后一个元素 shift() 把数组内部的第一个元素从其中删除,并返回第一个元素的值 unshift() 向数组外部的 ...

  5. JS增删改查localStorage实现搜索历史功能

    <script type="text/javascript"> var referrerPath = "@ViewBag.ReferrerPath" ...

  6. webpack4+express+mongodb+vue 实现增删改查

    在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...

  7. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  8. jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. Asp.Net 之 MasterPage

    母版页是VS2005中新引入的一个概念,它很好地实现界面设计的模块化,并且实现实现了代码的重用.它就像婚纱影楼中的婚纱模板,同一个婚纱模板可以给不同的新人用,只要把他们的照片贴在已有的婚纱模板就可以形 ...

  2. Python练习题 029：Project Euler 001：3和5的倍数

    开始做 Project Euler 的练习题.网站上总共有565题,真是个大题库啊! # Project Euler, Problem 1: Multiples of 3 and 5 # If we ...

  3. NSBlockOperation添加多个任务

    //创建一个队列 NSOperationQueue *operation=[[NSOperationQueue alloc]init]; //把任务放在NSBlockOperation里面 NSBlo ...

  4. Boost.Any

    支持类型安全地存储和获取任意类型的值 #include <list> #include <boost/any.hpp> #include <string> #inc ...

  5. 2dx解析cocosbuilder中使用layer时的缺陷

    2dx解析cocosbuilder中使用layer时的缺陷 cocos2d-x 3.7 cocosbuilder中的layer通常会用到触摸属性: 但是在2dx解析布局文件的时候,却很多属性都没解析: ...

  6. 判断某个对象是不是DOM对象

    在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有DOM ...

  7. UITabbar的简单操作和实际应用

     简易编辑Tabbar //**标签栏控制器的初始化 UITabBarController * tabbarC = [[UITabBarController alloc] init]; //设置tab ...

  8. Crosswalk入门

    Crosswalk入门 CSDN资讯:Crosswalk的介绍 Crosswalk官方地址 上面的链接可以看到Crosswalk的介绍,Crosswalk种种吹牛逼的描述我就不写了.写一下我的使用感受 ...

  9. Oracle数据库查看执行计划

    基于ORACLE的应用系统很多性能问题,是由应用系统SQL性能低劣引起的,所以,SQL的性能优化很重要,分析与优化SQL的性能我们一般通过查看该SQL的执行计划,本文就如何看懂执行计划,以及如何通过分 ...

  10. 根据ui控件的字体计算占用的长度

    //1.根据icon计算name的长度 CGFloat nameX = CGRectGetMaxX(_icon.frame) + kBorder; CGFloat nameY = iconY; //计 ...