JS增删改HTML表格

要求如下：

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

HTML页面代码：

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title>js增删改 v1.0</title>
 5     <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
 6 </head>
 7 <body >
 8 <center>
 9     <br/><br/>
10     <h2>js增删改 v1.0</h2>
11     <br/><br/>
12     <a href="javascript:showAddInput();">添加数据</a>
13     <br/><br/>
14 <div class="table" >
15   <table border="1" style="text-align:center" id="table">
16     <tr>
17       <th>用户名</th>
18       <th>密码</th>
19       <th>姓名</th>
20       <th>邮箱</th>
21       <th>电话</th>
22       <th>qq</th>
23       <th>身份证号</th>
24       <th>操作</th>
25     </tr>
26     <tr>
27       <td>A1</td>
28       <td>123</td>
29       <td>a</td>
30       <td>[email protected]</td>
31       <td>123456789</td>
32       <td>40040044</td>
33       <td>270205197405213513</td>
34       <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);" >修改<a>&nbsp<a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td>
35     </tr>
36     <tr>
37       <td>A2</td>
38       <td>456</td>
39       <td>b</td>
40       <td>[email protected]</td>
41       <td>987654321</td>
42       <td>30030033</td>
43       <td>470205197405213513 </td>
44       <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a>&nbsp<a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td>
45     </tr>
46     <tr>
47       <td>A3</td>
48       <td>789</td>
49       <td>c</td>
50       <td>[email protected]</td>
51       <td>800800820</td>
52       <td>30030030</td>
53       <td>570205197405213513 </td>
54       <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a>&nbsp<a style="color:blue;cursor:pointer;" onclick="delRow(this);">删除</a></td>
55     </tr>
56   </table>
57 </div>
58
59 <div style="display:none" id="addinfo">
60 <form>
61     <br>
62     用户名:（用户名只能用英文+数字或下划线）<br><input type="text" id="username"  /><br><!--限制用户名只能用英文 下划线 或数字-->
63     密码:（英文+数字或下划线，长度不小于6）<br><input type="text" id="password"/><br>
64     姓名:（只能是汉字）<br><input type="text" id="name"/><br>
65     邮箱:<br><input type="text" id="email"/><br>
66     电话:<br><input type="text" id="phone"/><br>
67     qq:<br><input type="text" id="qq"/><br>
68     身份证:<br><input type="text" id="uid"/><br><br>
69     <input type="button" value="提交" onclick="addInfo()" id="btn_add">
70     <input type="button" value="提交" onclick="updateInfo()" style="display:none" id="btn_update">
71     <input type="button" value="取消" onclick="hideAddInput()">
72 </form>
73 </div>
74 </center>
75 </body>
76 </html>

JS如下：

  1 var row = 0 ;  //定义全局行数用于修改
  2 var reg_email = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;  //用于判断邮箱格式
  3 var reg_name = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i; //用于判断用户名格式
  4 var reg_chinese =  /^[\u0391-\uFFE5]+$/  ; //用于判断姓名格式
  5 var reg_pass = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;//用于判断密码格式
  6 //----获取行号-----
  7 function getRow(r){
  8     var i=r.parentNode.parentNode.rowIndex;
  9     return i ;
 10 }
 11 //----获取行号-----
 12
 13 //----删除某一行-----
 14 function delRow(r){
 15     document.getElementById(‘table‘).deleteRow(getRow(r));
 16 }
 17 //----删除某一行-----
 18
 19 //----清除添加信息框的内容-----
 20 function cleanAddInput(){
 21     document.getElementById(‘username‘).value=‘‘;
 22     document.getElementById(‘password‘).value=‘‘;
 23     document.getElementById(‘name‘).value=‘‘;
 24     document.getElementById(‘email‘).value=‘‘;
 25     document.getElementById(‘phone‘).value=‘‘;
 26     document.getElementById(‘qq‘).value=‘‘;
 27     document.getElementById(‘uid‘).value=‘‘;
 28 }
 29 //----清除添加信息框的内容-----
 30
 31 //----显示添加信息框-----
 32 function showAddInput(){
 33     document.getElementById(‘addinfo‘).style="display:block-inline" ;
 34     document.getElementById(‘btn_add‘).style="display:block-inline" ;
 35     document.getElementById(‘btn_update‘).style="display:none" ;
 36     cleanAddInput();
 37 }
 38 //----显示添加信息框-----
 39
 40 //----隐藏添加信息框-----
 41 function hideAddInput(){
 42     document.getElementById(‘addinfo‘).style="display:none" ;
 43
 44 }
 45 //----隐藏添加信息框-----
 46
 47 //----判断输入框的信息是否符合要求-----
 48 function judge(){
 49     //根据id获取表单信息
 50     var username = document.getElementById(‘username‘).value;
 51     var password = document.getElementById(‘password‘).value;
 52     var name = document.getElementById(‘name‘).value;
 53     var email = document.getElementById(‘email‘).value;
 54     var phone = document.getElementById(‘phone‘).value;
 55     var qq = document.getElementById(‘qq‘).value;
 56     var uid = document.getElementById(‘uid‘).value;
 57     var judge = true ;  //用于判断表单信息是否符合
 58     if(username==‘‘){
 59         judge = false ;
 60         alert(‘请输入用户名‘);
 61     }else if(password==‘‘){
 62         judge = false ;
 63         alert(‘请输入密码‘);
 64     }else if(name==‘‘){
 65         judge = false ;
 66         alert(‘请输入姓名‘);
 67     }else if(email==‘‘){
 68         judge = false ;
 69         alert(‘请输入邮箱‘);
 70     }else if(phone==‘‘){
 71         judge = false ;
 72         alert(‘请输入电话‘);
 73     }else if(qq==‘‘){
 74         judge = false ;
 75         alert(‘请输入qq‘);
 76     }else if(uid==‘‘){
 77         judge = false ;
 78         alert(‘请输入身份证‘);
 79     }else if(uid.length!=18){
 80         judge = false ;
 81         alert(‘身份证应为18位，请正确填写‘);
 82     }else if(qq.length<=5 &&qq.length>=13){
 83         judge = false ;
 84         alert(‘请正确输入qq号码‘);
 85     }else if(phone.length<3&&qq.length>12){
 86         judge = false ;
 87         alert(‘请正确输入电话‘);
 88     }else if(!reg_email.test(email)){
 89         judge = false ;
 90         alert(‘邮箱格式不正确‘);
 91     }else if(!reg_name.test(username)){
 92         judge = false ;
 93         alert(‘用户名格式不正确‘);
 94     }else if(!reg_chinese.test(name)){
 95         judge = false ;
 96         alert(‘姓名格式不正确‘);
 97     }else if((!reg_pass.test(password))||password.length<6){
 98         judge = false ;
 99         alert(‘密码格式不正确‘);
100     }
101
102     return judge ;
103 }
104 //----判断输入框的信息是否符合要求-----
105
106 //----新增信息的插入方法-----
107 function insertInfo(){
108     //根据id获取表单信息
109     var arr = new Array();
110     arr[0] = document.getElementById(‘username‘).value;
111     arr[1] = document.getElementById(‘password‘).value;
112     arr[2] = document.getElementById(‘name‘).value;
113     arr[3] = document.getElementById(‘email‘).value;
114     arr[4] = document.getElementById(‘phone‘).value;
115     arr[5] = document.getElementById(‘qq‘).value;
116     arr[6] = document.getElementById(‘uid‘).value;
117     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>";
118     var x = document.getElementById(‘table‘).insertRow(1); //获取第一行对象
119
120     for(var i=0;i<arr.length;i++){
121         x.insertCell(i).innerHTML = arr[i] ;  //用循环把每个数据插入第一行的每一列
122     }
123
124 }
125 //----新增信息的插入方法-----
126
127 //----新增信息-----
128 function addInfo(){
129
130     if(judge()==true){
131         alert(‘添加成功‘);
132         insertInfo();  //执行插入
133         hideAddInput();  //隐藏添加信息框
134
135     }else{
136         alert(‘添加失败‘);
137     }
138 }
139 //----新增信息-----
140
141
142 //----根据行号修改信息-----
143 function updateRow(r){
144     row = getRow(r);   //把该行号赋值给全局变量
145     showAddInput();  //显示修改表单
146     //提交按钮替换
147     document.getElementById(‘btn_add‘).style="display:none" ;
148     document.getElementById(‘btn_update‘).style="display:block-inline" ;
149     insertInputFromQuery(queryInfoByRow(row));
150
151 }
152 //----根据行号修改信息-----
153
154
155 //----根据行号查信息----
156 function queryInfoByRow(r){
157
158     var arr = new Array();
159     for(var m=0 ; m<7;m++){
160         arr[m] = document.getElementById(‘table‘).rows[row].cells[m].innerText;
161     }
162     return arr ; //返回该行数据
163
164 }
165 //----根据行号查信息----
166
167 //----把查询到的信息放入修改的表单里----
168 function insertInputFromQuery(arr){
169     document.getElementById(‘username‘).value = arr[0];
170     document.getElementById(‘password‘).value = arr[1];
171     document.getElementById(‘name‘).value = arr[2];
172     document.getElementById(‘email‘).value = arr[3];
173     document.getElementById(‘phone‘).value = arr[4];
174     document.getElementById(‘qq‘).value = arr[5];
175     document.getElementById(‘uid‘).value = arr[6];
176
177 }
178 //----把查询到的信息放入修改的表单里----
179
180
181 function updateInfo(){
182     if(judge()==true){
183         alert(‘修改成功‘);
184         document.getElementById(‘table‘).deleteRow(row);//删除原来那行
185         insertInfo();  //插入修改后的值
186         hideAddInput();  //隐藏添加模块
187     }else{
188         alert(‘修改失败‘);
189         hideAddInput();
190     }
191 }

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

时间： 2024-10-24 20:01:42

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

js增删改查

1 <body> 2 <div class="main"> 3 </div> 4 <div> 5 <form id="form1" action="<c:url value="/listPdept.do"/>" method="post" autocomplete="off"></form> 6 <

JS 增删改查操作XML

效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script> <style type="text/css"

node.js 增删改查（原始）

index.js  连接数据库 const mongoose = require('mongoose') //数据库连接27017是mongodb数据库的默认端口 mongoose.connect('mongodb://localhost/playground', { useNewUrlParser: true }) .then(() => console.log('数据库连接成功')) .catch(() => console.log('数据库连接失败')) user.js 创建用户集合规则

js增删改Cookie的值

//获得cookie 的值function cookie(name) { var cookieArray = document.cookie.split("; "); //得到分割的cookie名值对 var cookie = new Object(); for (var i = 0; i < cookieArray.length; i++) { var arr = cookieArray[i].split("="); //将名和值分开 if (arr[0]

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

jsp页面表格布局Html代码 <body > <center> <input type="text" value="111" id="mytext"> <table border="1" width="60%" id="mytable"> <tr> <td id="td1">第一行第一列<

表格的增删改查

这周,复习了JS的操作,并用更简捷的代码,实现了表格的增删改查!   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">   <html>   <head>   <meta charset="utf-8">   <title><

【ExtJs】表格控件Grid的增删改查，利用renderer让操作列actioncolumn使用文字而不是图标

在<[ExtJs]与后台数据库交互的带分页表格组件grid的查询>(点击打开链接)中介绍了Grid控件是怎么分页显示的.再加上对此控件内的数据的增加.删除.修改,就真的是大功告成了.此控件的排序,应该在后台的数据库查询语句中增加一条order by语句即可,前台的排序在分页之后,仅能对当前页进行排序,没有什么意义.下面举一个例子来说明,如果对ExtJs的表格控件Grid进行增删改查 一.基本目标 还是在数据库中有一张user表: 然后在网页中,如下图所示,通过增加.编辑.删除按钮能为这个表格控

easyui学习笔记2—在行内进行表格的增删改操作【转载】

第一篇笔记中记录了如何实现表格的增删改,那个是点击之后跳出来一个对话框然后进行的,这里是在表格本身上进行的操作,也很简单,但是这里发现一个版本问题,也可以说是兼容性问题. 1.首先我们看引用的js和css代码 <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" href=&quo

JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打算正式将ko用起来,于是乎对ko和bootstraptable做了一些封装,在此分享出来供园友们参考.封装思路参考博客园大神萧秦,如果园友们有更好的方法,欢迎讨论. KnockoutJS系列文章: JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) JS组件