JS对HTML表格进行增删改操作


Posted in Javascript onAugust 22, 2016

要求如下: 

写一个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> <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> <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> <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> <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();
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
loading动画特效小结
Jan 22 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 #Javascript
详解AngularJS如何实现跨域请求
Aug 22 #Javascript
深入浅析JS Function()构造函数
Aug 22 #Javascript
深入浅析jQuery对象$.html
Aug 22 #Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 #Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 #Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 #Javascript
You might like
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
CI框架常用方法小结
2016/05/17 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
使用javascript做在线算法编程
2018/05/25 Javascript
Python类的基础入门知识
2008/11/24 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
GC是什么?为什么要有GC?
2013/12/08 面试题
精细化工应届生求职信
2013/11/17 职场文书
团支部建设方案
2014/05/02 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
纪检监察立案决定书
2015/06/24 职场文书
婚宴致辞
2015/07/28 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL