要求如下：

写一个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. WIN7 下 Qt Creator 安装 QWT

    WIN7 下 Qt Creator 安装 QWT 环境:WIN7 +QT Creator2.6.2 1.下载QWT源代码 qwt-6.1-rc3.zip 2 编译QWT  open projects- ...

  2. PHP抓取网络数据的6种常见方法

    http://www.nowamagic.net/academy/detail/12220245 http://www.nowamagic.net/academy/detail/12220245

  3. 从零开始学JAVA(06)-WebService_Jersey_Restful

    由于项目上需要写一个简单的评价系统,像银行MM前面的那种非常满意.满意.不满意那种,结合一个安卓的APP一起使用.由于使用3G网页通讯,个人认为http这种方式更合适.曾经听在Delphi鸟窝群的白雪 ...

  4. 神马小说：使用opensearch打造高性能搜索服务

    神马小说--- 使用opensearch打造高性能搜索服务 [使用背景] 神马小说是最早使用opensearch的用户,和opensearch一起成长.目前神马小说每天2亿搜索pv,1000w 用户. ...

  5. leetcode 题解：Remove Duplicates from Sorted Array II（已排序数组去三次及以上重复元素）

    题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For ex ...

  6. SQL Server之内连接 左连接 右连接 全连接 交叉连接

    SELECT * FROM Table_A GO SELECT * FROM Table_B GO --内连接 SELECT a.*, b.* FROM Table_A a JOIN Table_B ...

  7. 我关于SecureCRT远程连接失败的问题解决办法

    使用VirtualBox搭建一个ubuntu14.04的系统环境,为了省去主机与虚拟机直接互相直接一直切换的频繁操作,所以想到了使用SecureCRT连接,但是出现了连接问题,问题如下图:

  8. angularjs表格方式显示数据

    <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td&g ...

  9. Kinect For Windows V2开发日志六：人体的轮廓的表示

    Kinect中带了一种数据源,叫做BodyIndex,简单来说就是它利用深度摄像头识别出最多6个人体,并且用数据将属于人体的部分标记,将人体和背景区别开来.利用这一特性,就可以在环境中显示出人体的轮廓 ...

  10. php学习笔记1--开发环境搭建:apache+php+mysql

    php开发环境搭建:apache + php + mysql1.下载apache,php及mysql安装包2.安装apache:下载的apache若是.msi可直接双击,按指示一步一步安装:(若操作系 ...