要求如下：

写一个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. 关于Android中获取Intent里的数据

    Intent获取数据和发送数据的办法: //直接通过Intent发送 intent.putExtra("name","wytings"); //直接通过Inte ...

  2. 关于子线程使用Toast报错Can't create handler inside thread that has not called Looper.prepare()的解决办法

    形同如下代码,在Thread中调用Toast显示错误信息: new Thread(new Runnable(){ @Override public void run() { try{ weatherD ...

  3. LeetCode26 Remove Duplicates from Sorted Array

    题目: Given a sorted array, remove the duplicates in place such that each element appear only once and ...

  4. iOS- SQLite3的基本使用

    iOS- 简单说说iOS移动客户端SQLite3的基本使用  1.为什么要使用SQLite3?   •大量数据需要存储 •管理数据,存储数据   SQLite是一种关系型数据库(也是目前移动客户端的主 ...

  5. leetcode题解: Remove Duplicates from Sorted List（已排序单链表去重）

    题目: Given a sorted linked list, delete all duplicates such that each element appear only once. For e ...

  6. (转)Android学习笔记③——常用快捷键

    常用快捷键 代码跳转 描述:跳转是为了方便代码位置的定位,存在两种跳转:在定义处可以跳转到调用处,在调用处可以跳转到定义处. 快捷键:Cmd + 鼠标单击 方法间跳转 描述:从一个类方法跳转到临近的一 ...

  7. Linux chmod command

    @ chmod改变一个或多个文件的存取模式 chmod [options] mode files 只有文件属主或特殊用户才能使用该功能来改变文件存取模式.mode可以是数字形式或who opcode ...

  8. codeforces 579D D. "Or" Game(前后缀+贪心)

    题目链接: D. "Or" Game time limit per test 2 seconds memory limit per test 256 megabytes input ...

  9. asp.net渐变

    简介:第一个参数代表渐变的方向,后面的StartColorStr和End就不用解释了: filter: progid:DXImageTransform.Microsoft.Gradient(Gradi ...

  10. CSS之transition（动画）

    Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...