Add, delete, and modify HTML tables using JS

The requirements are as follows:

Write an html page with a table in it to store user information, including: user name, password, name, email, phone number, QQ, and ID number.
Now we need to dynamically add, delete, modify and check the table through js (just memory operations):
First, use js to load 3 initialization records when loading the page;
There is a button to add records, click A div layer pops up to provide input. Each field must conform to the input format and cannot be empty:
Username: English + numbers + underline;
Password: English + numbers + underline + 6 or more digits;
Name : Chinese;
Email, phone, QQ, ID number conform to the format;
Each record has modifications and deletions;
Modifications are similar to additions, and the original values ​​must be read out;

HTML page code:

 
 
 




 


 
js增删改 v1.0
 


 添加数据
 

 

 

 

  
用户名
  
密码
  
姓名
  
邮箱
  
电话
  
qq
  
身份证号
  
操作
 
 

  
A1
  
123
  
a
  
a@qq.com
  
123456789
  
40040044
  
270205197405213513
  
修改 删除
 
 

  
A2
  
456
  
b
  
b@qq.com
  
987654321
  
30030033
  
470205197405213513 
  
修改 删除
 
 

  
A3
  
789
  
c
  
c@qq.com
  
800800820
  
30030030
  
570205197405213513 
  
修改 删除
 
 

 


 

 用户名:（用户名只能用英文+数字或下划线）


 密码:（英文+数字或下划线，长度不小于6）


 姓名:（只能是汉字）


 邮箱:


 电话:


 qq:


 身份证:



 
 
 

js code:

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] ="修改 删除";
 var x = document.getElementById('table').insertRow(1); //获取第一行对象
  
 for(var i=0;i
 The above is the entire content of this article. I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website. 
For more articles related to adding, deleting, and modifying HTML tables with JS, please pay attention to the PHP Chinese website!