The requirements are as follows:
Write an html page with a form that stores 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, and after clicking, a div layer pops up to provide input, requiring that each field must conform to the input format and cannot be empty:
Username: English + number + underscore;
Password: English + digit + underscore + 6 or above;
Name: Chinese;
Email, phone number, qq, and ID number meet the format;
Each record is modified or deleted;
Modify similarly to add, and read out the original value;
HTML page code:
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js Add-to-deletion v1.0</title> <script src="js/test.js" type="text/javascript" charset="utf-8"></script></head><body ><center> <br/><br/> <h2>js Add-to-to-deletion v1.0</h2> <br/><br/> <a href="javascript:showAddInput();">Add data</a> <br/><br/> <div > <table style="text-align:center" id="table"> <tr> <th>Username</th> <th>Password</th> <th>Name</th> <th>Email</th> <th>Tel</th> <th>Qq</th> <th>Identity card number</th> <th>Operation</th> </tr> <tr> <td>A1</td> <td>123</td> <td>a</td> <td>[email protected]</td> <td>123456789</td> <td>40040044</td> <td>270205197405213513</td> <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);" >Modify<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">Delete</a></td> </tr> <tr> <td>A2</td> <td>456</td> <td>b</td> <td>b</td> <td>[email protected]</td> <td>987654321</td> <td>30030033</td> <td>470205197405213513 </td> <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">Modify<a> <a style="color:blue;cursor:pointer;" onclick="delRow(this);">Delete</a></td> </tr> <tr> <td>A3</td> <td>789</td> <td>c</td> <td>c</td> <td>[email protected]</td> <td>800800820</td> <td>30030030</td> <td>570205197405213513 </td> <td><a style="color:blue;cursor:pointer;" onclick="updateRow(this);">Modify</a></td> </tr> </table></div><div style="display:none" id="addinfo"><form> <br> Username: (Username can only be used in English + numbers or underscore)<br><input type="text" id="username" /><br><!--Restrict username can only be used in English underscore or numbers--> Password: (English + numbers or underscore, length not less than 6)<br><input type="text" id="password"/><br> Name: (Only Chinese characters)<br><input type="text" id="name"/><br> Email:<br><input type="text" id="email"/><br> Phone:<br><input type="text" id="phone"/><br> qq:<br><input type="text" id="qq"/><br> ID card:<br><input type="text" id="uid"/><br><br> <input type="button" value="submit" onclick="addInfo()" id="btn_add"> <input type="button" value="submit" onclick="updateInfo()" style="display:none" id="btn_update"> <input type="button" value="cancel" onclick="hideAddInput()"></form></div></center></body></html>
js code:
var row = 0 ; //Define the global number of rows to modify var reg_email = /^/w+((-/w+)|(/./w+))*/@[A-Za-z0-9]+((/.|-)[A-Za-z0-9]+)*/.[A-Za-z0-9]+)*/.[A-Za-z0-9]+$/; //Used to judge the mailbox format var reg_name = /^((/w*/d/w*[az]/w*)|(/w*[az]/w*/d/w*))$/i; //Used to judge the user name format var reg_chinese = /^[/u0391-/uFFE5]+$/; //Used to judge the name format var reg_pass = /^((/w*/d/w*[az]/w*)|(/w*[az]/w*/d/w*))$/i;//Use to determine the password format//---get the line number-----function getRow(r){ var i=r.parentNode.parentNode.rowIndex; return i ;}//---get the line number----//---- delete a certain line------- function delRow(r){ document.getElementById('table').deleteRow(getRow(r));}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- document.getElementById('username').value=''; document.getElementById('password').value=''; document.getElementById('name').value=''; document.getElementById('email').value=''; document.getElementById('phone').value=''; document.getElementById('phone').value=''; document.getElementById('qq').value=''; document.getElementById('uid').value='';}//----Clear the content of the add information box-----/----------Show 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(); }//----Show the Add Information Box-----/----Hide Add Information Box------function hideAddInput(){ document.getElementById('addinfo').style="display:none" ;}//----Hide Add Information Box----/------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 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 whether the form information meets if(username==''){ judge = false ; alert('Please enter the user name'); }else if(password==''){ judge = false ; alert('Please enter the password'); }else if(name==''){ judge = false ; alert('Please enter your name'); }else if(email==''){ judge = false ; alert('Please enter your email'); }else if(phone==''){ judge = false ; alert('Please enter your phone'); }else if(uid==''){ judge = false ; alert('Please enter your ID card'); }else if(uid.length!=18){ judge = false ; alert('Please enter your ID card'); }else if(uid.length!=18){ judge = false ; alert('Identity card should be 18 digits, please fill in correctly'); }else if(qq.length<=5 &&qq.length>=13){ judge = false ; alert('Please enter the qq number correctly'); }else if(phone.length<3&&qq.length>12){ judge = false ; alert('Please enter the phone correctly'); }else if(!reg_email.test(email)){ judge = false ; alert('Email format is incorrect'); }else if(!reg_name.test(username)){ judge = false ; alert('Username format is incorrect'); }else if(!reg_chinese.test(name)){ judge = false ; alert('name format is incorrect'); }else if((!reg_pass.test(password))||password.length<6){ judge = false ; alert('password format is incorrect'); } return judge ;}//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 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); //Get the first row object for(var i=0;i<arr.length;i++){ x.insertCell(i).innerHTML = arr[i] ; //Insert each data into each column of the first row with a loop} }//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- //Show the modification form//Submit button to replace document.getElementById('btn_add').style="display:none" ; document.getElementById('btn_update').style="display:block-inline" ; insertInputFromQuery(queryInfoByRow(row)); }//----Modify information based on line number----//------File 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 ; //Return the data of this line}//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 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 the original line insertInfo(); //Insert the modified value hideAddInput(); //HideAddInput(); //HideAddModule}else{ alert('Modification failed'); hideAddInput(); }}The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.