首页
所有分类
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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
纯js实现仿QQ邮箱弹出确认框
Apr 29 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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
queue(1) TaiShan(1) 内存池(1) RecyclerView(1) 腾讯云(1) 九宫格(5) 云服务器(1) Foreign Key(1) 外键约束(1) JDK(1)
You might like
PHP4中session登录页面的应用
2008/07/25 PHP
javascript里的条件判断
2007/02/27 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
详解JavaScript基础知识（JSON、Function对象、原型、引用类型）
2018/01/16 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
python相似模块用例
2016/03/04 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python numpy 按行归一化的实例
2019/01/21 Python
Django ORM filter() 的运用详解
2020/05/14 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
数学系毕业生的自我评价
2014/01/10 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
教师教育心得体会
2016/01/19 职场文书
医学生自荐信范文（2016精选篇）
2016/01/28 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Python 数据可视化之Bokeh详解
2021/11/02 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技