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

2024-08-03 17:08:45

要求如下：

写一个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>&nbsp<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>&nbsp<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>&nbsp<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>&nbsp<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实现table表格的增删

公司实习生问我table的增删操作,用jQuery很简单的实现了.又问我不使用jQuery,只使用js如何实现. 面对这种情况,我的一贯做法是'不理解,但是支持'. jQuery用的多了,人也懒了,但还是用js实现了这一操作,觉得难点在于IE兼容... 只是想找代码看看的可以跳过分析过程,文章底部附有完整代码. 以下是coding过程: HTML结构代码一个基本的table结构,增加了一些简单的样式,三个按钮分别对应创建.清空,和一个预留. <!DOCTYPE HTML> <html&
JS动态增删表格行的方法

本文实例讲述了JS动态增删表格行的方法.分享给大家供大家参考,具体如下: function insertRow(tableName,className,bgcolor, cellContentArray){ var t = document.getElementByIdx(tableName); //取得table表 var tr = t.insertRow(); //插入一行 tr.className=className; //设置行的css tr.bgcolor=bgcolor; //设置行
javascript实现表格增删改操作实例详解

本文实例讲述了javascript实现表格增删改操作的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
JS对HTML表格进行增删改操作

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

前言关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 5 项目不背锅(等后端给接口的话可能会背锅) 等等优点,最后一条我加的. 第一步先安装mock.js npm install mockjs --save-dev 第二步使用 mock.js import Mock from 'mockjs' 哪里用就在哪里引入.我是在项目src/mock/index.js里面使用moc
React Ant Design树形表格的复杂增删改操作

最近因为业务接触了antd,使用antd完成一个复杂的树形表格的显示以及修改.在这其中遇见了不少坑,很多功能antd只写了初步的功能,更为细化的功能只能自己完善.踩过的坑都写在了这里. 树形表格的显示在antd中对于表格的key值有着严格的控制,每一个row都必须有一个独一无二的key值,可以是数字也可以是字符串.这一点和我曾经使用过得iview有着很大的区别.react使用key来代表每一行是为了避免重新渲染的问题,这个优化也在实际的开发中带来了不少的问题.比如新建行时需要自定义新key.
AngularJS实现表格的增删改查（仅限前端）

用AngularJS实现对表格的增删改查(仅限前端),具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keywo
Jquery easyui开启行编辑模式增删改操作

jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easyui,您不需要写太多 javascript 代码,一般情况下您只需要使用一些 html 标记来定义用户界面. HTML 网页的完整框架. easyui 节省了开发产品的时间和规模. easyui 非常简单,但是功能非常强大. 先给大家展示效果图:
利用python模拟sql语句对员工表格进行增删改查

本文主要给大家介绍了关于python模拟sql语句对员工表格进行增删改查的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 具体需求: 员工信息表程序,实现增删改查操作: 可进行模糊查询,语法支持下面3种: select name,age from staff_data where age > 22 多个查询参数name,age 用','分割 select * from staff_data where dept = 人事 select * from
PyQt5 python 数据库表格动态增删改详情

目录 (一).手动连接数据库 (二).编程中使用数据库 (一).手动连接数据库与下一个的程序连接数据库是独立的2个部分 (1)连接数据库 (2)设置数据源类型 (3)连接及测试 (4)属性中的连接字符串 (二).编程中使用数据库 (5)在Form上加入datagridview,加入两个按钮 (6)代码中加上数据库相关命名空间 using System.Data.SqlClient; (7)第一个按钮“连接数据库”中的代码效果图: from PyQt5.QtWidgets import * f
Python+PyQt5实现数据库表格动态增删改

目录题目描述解题思路/算法分析/问题及解决实验代码运行结果题目描述本次实验为连接数据库的实验,并对数据库进行一些简单的操作,要实现的基本功能如下所示,要能连接并展现数据库里的数据,能够实现插入功能. 拓展; 实现按学号查找学生信息功能实现清空数据功能实现保存数据功能实现右键菜单功能解题思路/算法分析/问题及解决本次实验可主要分为两个部分,即数据库连接操作部分和数据可视化操作界面部分. 数据库连接部分采用python的pymysql库对数据库进行连接操作. 数据可视化部分采用
PyQt5 python 数据库表格动态增删改详情

目录 (一).手动连接数据库 (二).编程中使用数据库 (一).手动连接数据库与下一个的程序连接数据库是独立的2个部分 (4)属性中的连接字符串 (二).编程中使用数据库效果图: from PyQt5.QtWidgets import * from PyQt5.QtGui import * from PyQt5.QtCore import * from PyQt5 import QtCore from copy import copy import sys import pymysql in

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

相关推荐

随机推荐