JS增删改HTML表格

要求如下：

写一个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表格的更多相关文章

jQuery动态增删改查表格信息，可左键/右键提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js 增删改查
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
JS 增删改查操作XML
效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
js 增删改查方法
push() 向数组的末尾添加一个或多个元素 pop() 删除数组内部并返回数组的最后一个元素 shift() 把数组内部的第一个元素从其中删除,并返回第一个元素的值 unshift() 向数组外部的 ...
JS增删改查localStorage实现搜索历史功能
<script type="text/javascript"> var referrerPath = "@ViewBag.ReferrerPath" ...
webpack4+express+mongodb+vue 实现增删改查
在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
javascript生成表格增删改查 JavaScript动态改变表格单元格内容动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

oracle数据迁移
通过这个文章演示一下Oracle的表空间迁移流程以及需要注意的诸多事项. 实验目标:将ora10g数据库实例上的表空间TBS_SEC_D迁移到secooler数据库实例上操作系统:Redhat 5.3 ...
Ubantu下FTP服务器资源进行控制
在FTP服务器的管理中无论对本地用户还是匿名用户,对于FTP服务器资源的使用都需要进行控控制, 避免由于负担过大造成FTP服务器运行异常, 可以添加以下配置项对FTP客户机使用FTP服务器资源进行控制 ...
php与mysql通讯那点事
php与mysql通讯那点事 http://www.cnxct.com/libmysql-mysqlnd-which-is-best-and-what-about-mysqli-pdomysql-my ...
Linux 混杂设备、外部中断和输入子系统
混杂设备也是一种字符设备,主设备号固定为10.相对于普通字符设备驱动,它不需要自己去生成设备文件. 1.声明使用的头文件 #include <linux/miscdevice.h> 2.定 ...
[Java,JavaEE] 最常用的Java库一览
引用自:http://www.importnew.com/7530.html 本文由 ImportNew - 邢敏翻译自 programcreek.欢迎加入Java小组.转载请参见文章末尾的要求. ...
c#几个小例子引发的思考
楚广明老师的c#教程每一节都会给出几个小例子让大家联系,对于初学者来说这确实是一件很纠结的事情,下面我把这几个小例子简单的写一下.同时看一下我们学到了什么 1.面向过程版的圆周长面积计算 using ...
启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法！&&在eclipse.ini中为eclipse指定jdk启动
参考:http://blog.csdn.net/zyz511919766/article/details/7442633 http://blog.sina.com.cn/s/blog_028f0c1c ...
【Warshall_Floyd】
模板: /* Problem: 任意两点间的最短路 Tips : 可以处理边时负数的情况. 判断图中是否有负圈,只需检查d[i][j]是负数的顶点i就可以. 复杂度 : O(n^3) */ #incl ...
android目录
2013-09-121.activity生命周期 activity生命周期2 widget http://blog.csdn.net/xiang_j2ee/article/details/727564 ...
Xcode6编译SDWebImage报错解决方法(SDWebImageDownloaderOperation.m错误)
报错:Use of undeclared identifier '_executing' / '_finished': 解决方法: 在SDWebImageDownloaderOperation类的实现 ...

JS增删改HTML表格

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

随机推荐

热门专题