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

 更新时间:2016年08月22日 16:23:42   作者:scnu_yz   我要评论
这篇文章主要为大家详细介绍了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> <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();
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 使用do...while的方法输入一个月中所有的周日(实例代码)

    使用do...while的方法输入一个月中所有的周日(实例代码)

    下面小编就为大家带来一篇使用do...while的方法输入一个月中所有的周日(实例代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • js制作网站首页图片轮播特效代码

    js制作网站首页图片轮播特效代码

    这篇文章主要为大家详细介绍了js制作网站首页图片轮播特效代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • javascript 通用loading动画效果实例代码

    javascript 通用loading动画效果实例代码

    这篇文章主要介绍了javascript 通用loading动画效果实例代码,有需要的朋友可以参考一下
    2014-01-01
  • javascript 闭包函数做显隐内容

    javascript 闭包函数做显隐内容

    用闭包函数做显隐内容,主要优势就是可以增加显示与隐藏效率。
    2009-03-03
  • javascript 闭包详解

    javascript 闭包详解

    闭包:是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。在javascript中没有块级作用域,一般为了给某个函数申明一些只有该函数才能使用的局部变量时,我们就会用到闭包,我们来详细探讨下
    2015-07-07
  • 详解js中常规日期格式处理、月历渲染和倒计时函数

    详解js中常规日期格式处理、月历渲染和倒计时函数

    大家在日常开发的时候经常要用到日期格式的处理,下面这篇文章主要给大家介绍了js中常规日期格式处理、月历渲染及倒计时函数,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • ECMAScript6变量的解构赋值实例详解

    ECMAScript6变量的解构赋值实例详解

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring),下文中给大家提供了嵌套数组的解构例子,大家一起看看吧
    2017-09-09
  • javascritp添加url参数将参数加入到url中

    javascritp添加url参数将参数加入到url中

    javascritp添加url参数方法,将参数加入到url中,如果原来url中有则覆盖,下面是示例代码,感兴趣的朋友可以参考下
    2014-09-09
  • JS实现给数组对象排序的方法分析

    JS实现给数组对象排序的方法分析

    这篇文章主要介绍了JS实现给数组对象排序的方法,结合实例形式分析了javascript数组对象排序相关实现方法与操作注意事项,需要的朋友可以参考下
    2019-06-06
  • Bootstrap基本插件学习笔记之Alert警告框(20)

    Bootstrap基本插件学习笔记之Alert警告框(20)

    这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之ALert警告框的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论