JS to the HTML table to add the deletion operation _javascript skill

Requirements are as follows:

Write an HTML page that contains a form that stores user information, including user name, password, name, email, phone, QQ, and ID number.
Now to the table through JS dynamic additions and deletions to check (just memory operation can):
First, load the page with JS loading 3 initialization records;
There is a button to increase the record, click to pop a div layer to provide input, require the fields must conform to the input format and can not be empty:
User name: English + digit + underline;
Password: English + digit + underline + 6 digits;
Name: Chinese;
e-mail, telephone, QQ, identity card number in line with the format;
Each record is modified and deleted;
Revise similar increase, want to read out the original value;

HTML page code:

JS Code:

var row = 0; Defines the global number of rows used to modify var Reg_email =/^\w+ (-\w+) | ( \.\w+)) *\@[a-za-z0-9]+ (\.| -) [a-za-z0-9]+) *\. [a-za-z0-9]+$/; Used to determine the mailbox format var reg_name =/^ (\w*\d\w*[a-z]\w*) | ( \w*[a-z]\w*\d\w*)) $/i; Used to determine user name format var reg_chinese =/^[\u0391-\uffe5]+$/; Used to determine the name format var reg_pass =/^ (\w*\d\w*[a-z]\w*) | ( 
 \w*[a-z]\w*\d\w*) $/i;//is used to determine the password format//----Get line number-----function GetRow (r) {var i=r.parentnode.parentnode.rowindex;
return i; //----Get line number-----//----Delete a row-----function Delrow (r) {document.getElementById (' table '). DeleteRow (GetRow (R));//---
 -Deletes a row-----//----Clears the contents of the Add Information box-----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= '; //----Clear the contents of the Add Information box-----//----Display the Add Information box-----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 (); The//----display add information box-----//----Hide Add info box-----function hideaddinput () {document.getElementById (' Addinfo '). style= "Display:

None "; }//----Hide Add information box-----//----Determine if the information in the input box meets the requirements-----function judge () {//Get form information based on ID var username = document.getElementById (' u
 Sername '). 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;
  Used to determine if the form information conforms to the IF (username== ') {judge = false;
 Alert (' Please enter user name ');
  }else if (password== ') {judge = false;
 Alert (' Please enter password ');
  }else if (name== ') {judge = false;
 Alert (' Please enter name ');
 }else if (email== ') { Judge = false;
 Alert (' Please enter the mailbox ');
  }else if (phone== ') {judge = false;
 Alert (' Please enter telephone ');
  }else if (qq== ') {judge = false;
 Alert (' Please enter QQ ');
  }else if (uid== ') {judge = false;
 Alert (' Please enter an ID card ');
  }else if (uid.length!=18) {judge = false;
 Alert (' ID card should be 18 digits, please fill in correctly ');
  }else if (qq.length<=5 &&qq.length>=13) {judge = false;
 Alert (' Please enter QQ number correctly ');
  }else if (phone.length<3&&qq.length>12) {judge = false;
 Alert (' Please enter the telephone correctly ');
  }else if (!reg_email.test (email)) {judge = false;
 Alert (' Incorrect mailbox format ');
  }else if (!reg_name.test (username)) {judge = false;
 Alert (' username format is not correct ');
  }else if (!reg_chinese.test (name)) {judge = false;
 Alert (' Incorrect name format '); }else if (!reg_pass.test (password)) | |
  PASSWORD.LENGTH&LT;6) {judge = false;
 Alert (' Password format is not correct ');
return judge;
 //----Determine if the information in the input box meets the requirements-----//----Insert method for new information-----function Insertinfo () {//Get form information based on 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); ' > Modify </a> <a style= ' text-align:center;color:blue;cursor:pointer; ' onclick= ' delRow (this); '
 > Delete </a> "; var x = document.getElementById (' table '). InsertRow (1); Gets the first row object for (Var i=0;i<arr.length;i++) {X.insertcell (i). InnerHTML = Arr[i];////insert each data into each column in the first row}//----new Letter
  The insertion method-----//----New information-----function Addinfo () {if (judge () ==true) {alert (' Add success '); Insertinfo (); Execute Insert hideaddinput ();
 Hide Add info Box}else{alert (' Add failed '); 
 }//----new information-----//----Modify information based on line number-----function Updaterow (r) {row = GetRow (r);///Assign the line number to the global variable showaddinput ();//Show Modify Form Submit button to replace document.getElementById (' Btn_add'). style= "Display:none";
 document.getElementById (' Btn_update '). style= "Display:block-inline";
 
Insertinputfromquery (Queryinfobyrow (row));
 //----Modify the information according to the line number-----//----Check information according to the line number----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; Returns the row data}//----Check the information according to the line number----//----Put the query information into the modified form----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];
  //----Put the query information into the modified form----function Updateinfo () {if (judge () ==true) {alert (' modified successfully '); document.getElementById (' table '). DeleteRow (row);//delete original line insertinfo (); Inserts the modified value hideaddinput (); //Hide Add Module}else{alert (' Modify failed ');
 Hideaddinput ();
 }
}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.