JS對HTML表格進行增刪改操作

2020-03-24 16:02:23

字體：大中小

供稿：網(wǎng)友

寫一個html頁面，里面有一個表格，儲存用戶信息，包括：用戶名，密碼，姓名，郵箱，電話，qq，身份證號。
現(xiàn)在要通過js對表格進行動態(tài)的增刪改查（只是內(nèi)存操作即可）:
首先，加載頁面時用js加載3條初始化記錄；
有一個增加記錄的按鈕，點擊后彈出一個div層提供輸入，要求各字段必須符合輸入格式且不能為空：
用戶名：英文＋數(shù)字＋下劃線；
密碼：英文＋數(shù)字＋下劃線＋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();" 添加數(shù)據(jù) /a br/ br/ div table border="1" id="table" th 用戶名 /th th 密碼 /th th 姓名 /th th 郵箱 /th th 電話 /th th qq /th th 身份證號 /th th 操作 /th /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 修改 a a 刪除 /a /td /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 修改 a a 刪除 /a /td /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 修改 a a 刪除 /a /td /tr /table /div div id="addinfo" form 用戶名:（用戶名只能用英文+數(shù)字或下劃線） br input type="text" id="username" / br !--限制用戶名只能用英文下劃線或數(shù)字-- 密碼:（英文+數(shù)字或下劃線，長度不小于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="提交" id="btn_add" input type="button" value="提交" id="btn_update" input type="button" value="取消" /form /div /center /body /html js代碼：var row = 0 ; //定義全局行數(shù)用于修改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));//----刪除某一行-----//----清除添加信息框的內(nèi)容-----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='';//----清除添加信息框的內(nèi)容-----//----顯示添加信息框-----function showAddInput(){ document.getElementById('addinfo'). ; document.getElementById('btn_add'). ; document.getElementById('btn_update'). ; cleanAddInput(); //----顯示添加信息框-----//----隱藏添加信息框-----function hideAddInput(){ document.getElementById('addinfo'). ;//----隱藏添加信息框-----//----判斷輸入框的信息是否符合要求-----function judge(){ //根據(jù)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('身份證應(yīng)為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(){ //根據(jù)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 修改 /a a 刪除 /a var x = document.getElementById('table').insertRow(1); //獲取第一行對象 for(var i=0;i arr.length;i++){ x.insertCell(i).innerHTML = arr[i] ; //用循環(huán)把每個數(shù)據(jù)插入第一行的每一列//----新增信息的插入方法-----//----新增信息-----function addInfo(){ if(judge()==true){ alert('添加成功'); insertInfo(); //執(zhí)行插入 hideAddInput(); //隱藏添加信息框 }else{ alert('添加失敗');//----新增信息-----
for(var m=0 ; m m++){ arr[m] = document.getElementById('table').rows[row].cells[m].innerText; return arr ; //返回該行數(shù)據(jù)//----根據(jù)行號查信息----//----把查詢到的信息放入修改的表單里----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];//----把查詢到的信息放入修改的表單里----
document.getElementById('table').deleteRow(row);//刪除原來那行 insertInfo(); //插入修改后的值 hideAddInput(); //隱藏添加模塊 }else{ alert('修改失敗'); hideAddInput();以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持phpstudy。更多編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：js HTML5 Ajax實現(xiàn)文件上傳進度條功能

下一篇：spring(java,js,html) 截圖上傳圖片實例詳解