要求如下：
寫一個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>[email protected]</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>[email protected]</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>[email protected]</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();
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。