要求如下：

写一个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. （文件描述符0、1、2），（stdin、stdout、stderr），（终端设备）这三者之间的关系？？？

    前言 在Linux系统中,一切设备都看作文件.而每打开一个文件,就有一个代表该打开文件的文件描述符.程序启动时默认打开三个I/O设备文件:标准输入文件stdin,标准输出文件stdout,标准错误输出 ...

  2. redis 简介

    Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服务器端计算集合的并,交和补集(diff ...

  3. struts2与cookie实现自动登录和验证码验证

    主要介绍struts2与cookie结合实现自动登录 struts2与cookie结合时要注意采用.action 动作的方式实现cookie的读取 struts2的jar包 链接数据库文件 db.pr ...

  4. MyBatis优化技巧

    ☬配置日志文件 封装工具类 代码贴一下: package com.shxt.utils; import java.io.InputStream; import org.apache.ibatis.io ...

  5. [JavaEE] SSH框架搭建所需要的包

    struts2commons-logging-1.0.4.jar 主要用于日志处理freemarker-2.3.8.jar 模板相关操作需要包ognl-2.6.11.jar ognl表达示所需包,xw ...

  6. 测试 IE 浏览器兼容性 VirtualBox + modern.ie

    VirtualBox 是开源的虚拟机软件,常用的虚拟机软件还有 VMware / Hyper-V / Paralles Desktop . modern.ie 是微软官方提供的用于测试网页在各版本 I ...

  7. 【Mood-17】 github中在本地进行上传的时候出现ERROR: Repository not found. fatal: The remote end hung up unexpectedly

    一开始出现这个错误的时候还感觉很奇怪,我明明在在本地中相应的库文件夹命令中输入: vim ./git/config 将文件中的 [remote “origin"]部分去掉!

  8. OC之Block的用法和实现委托

    Block的基本概念 Block的基本用法 Block实现委托机制 一.Block的基本概念 Block是程序的代码块,这个代码块可以在需要的时候执行.IOS开发中,block到处可见,所以学好很重要 ...

  9. Git 暂存区

    可以用 git log 查看提交日志(附加的 --stat 参数可以看到每次提交的文件变更统计). $ cd /path/to/my/workspace/demo $ git log --stat 如 ...

  10. jquery.validate.js实例演示

    validate是前端重要的交互手段,提升性能的同时更能提升用户操作体验,validate的实现大概有三种方式:HTML5部分支 持,validate验证框架,手动写js或ajax调用接口.使用val ...