首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

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

- Author -

scnu_yz

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 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
继承(1) promise(2) redis(3) Kotlin(1) AOP(2) 验证表达式(1) XDM(3) 动态权限(1) 构造函数(1) Spring Security(2)
You might like
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
javascript实现checkBox的全选，反选与赋值
2015/03/12 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
详解vue-video-player使用心得（兼容m3u8）
2019/08/23 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
JS实现打字游戏
2019/12/17 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python错误：AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python函数式编程指南（四）：生成器详解
2015/06/24 Python
python实现的希尔排序算法实例
2015/07/01 Python
python安装教程
2018/02/28 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
django model object序列化实例
2020/03/13 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
世界上最大的二手相机店：KEN
2017/05/17 全球购物
Daniel Wellington官方海外旗舰店：丹尼尔惠灵顿DW手表
2018/02/22 全球购物
UNIX命令速查表
2012/03/10 面试题
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
前台文员个人求职信范文
2014/01/05 职场文书
社团文化节邀请函
2014/01/10 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
王亚平太空授课观后感
2015/06/12 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书