JS對(duì)HTML表格進(jìn)行增刪改操作

更新時(shí)間：2021年04月06日 08:39:36 作者：scnu_yz

這篇文章主要為大家詳細(xì)介紹了JS對(duì)HTML表格進(jìn)行增刪改操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS對(duì)HTML表格進(jìn)行增刪改的具體代碼，供大家參考，具體內(nèi)容如下

要求如下：

寫(xiě)一個(gè)html頁(yè)面，里面有一個(gè)表格，儲(chǔ)存用戶(hù)信息，包括：用戶(hù)名，密碼，姓名，郵箱，電話，qq，身份證號(hào)。

現(xiàn)在要通過(guò)js對(duì)表格進(jìn)行動(dòng)態(tài)的增刪改查（只是內(nèi)存操作即可）:
首先，加載頁(yè)面時(shí)用js加載3條初始化記錄；
有一個(gè)增加記錄的按鈕，點(diǎn)擊后彈出一個(gè)div層提供輸入，要求各字段必須符合輸入格式且不能為空：

用戶(hù)名：英文＋數(shù)字＋下劃線；
密碼：英文＋數(shù)字＋下劃線＋6位以上；
姓名：中文；
郵箱，電話，qq，身份證號(hào)符合格式；
每條記錄有修改、刪除；
修改類(lèi)似增加，要把原來(lái)值讀出來(lái)；

HTML頁(yè)面代碼：

<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 class="table" >
 <table border="1" style="text-align:center" id="table">
 <tr>
 <th>用戶(hù)名</th>
 <th>密碼</th>
 <th>姓名</th>
 <th>郵箱</th>
 <th>電話</th>
 <th>qq</th>
 <th>身份證號(hào)</th>
 <th>操作</th>
 </tr>
 <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 style="color:blue;cursor:pointer;" onclick="updateRow(this);" >修改<a>&nbsp<a style="color:blue;cursor:pointer;" onclick="delRow(this);">刪除</a></td>
 </tr>
 <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 style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a>&nbsp<a style="color:blue;cursor:pointer;" onclick="delRow(this);">刪除</a></td>
 </tr>
 <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 style="color:blue;cursor:pointer;" onclick="updateRow(this);">修改<a>&nbsp<a style="color:blue;cursor:pointer;" onclick="delRow(this);">刪除</a></td>
 </tr>
 </table>
</div>

<div style="display:none" id="addinfo">
<form>
 <br>
 用戶(hù)名:（用戶(hù)名只能用英文+數(shù)字或下劃線）<br><input type="text" id="username" /><br><!--限制用戶(hù)名只能用英文 下劃線 或數(shù)字-->
 密碼:（英文+數(shù)字或下劃線，長(zhǎng)度不小于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 ; //定義全局行數(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; //用于判斷用戶(hù)名格式
var reg_chinese = /^[\u0391-\uFFE5]+$/ ; //用于判斷姓名格式
var reg_pass = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;//用于判斷密碼格式
//----獲取行號(hào)-----
function getRow(r){
 var i=r.parentNode.parentNode.rowIndex; 
 return i ;
}
//----獲取行號(hào)-----

//----刪除某一行-----
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').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(){
 //根據(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('請(qǐng)輸入用戶(hù)名');
 }else if(password==''){
 judge = false ;
 alert('請(qǐng)輸入密碼');
 }else if(name==''){
 judge = false ;
 alert('請(qǐng)輸入姓名');
 }else if(email==''){
 judge = false ;
 alert('請(qǐng)輸入郵箱');
 }else if(phone==''){
 judge = false ;
 alert('請(qǐng)輸入電話');
 }else if(qq==''){
 judge = false ;
 alert('請(qǐng)輸入qq');
 }else if(uid==''){
 judge = false ;
 alert('請(qǐng)輸入身份證');
 }else if(uid.length!=18){
 judge = false ;
 alert('身份證應(yīng)為18位，請(qǐng)正確填寫(xiě)');
 }else if(qq.length<=5 &&qq.length>=13){
 judge = false ;
 alert('請(qǐng)正確輸入qq號(hào)碼');
 }else if(phone.length<3&&qq.length>12){
 judge = false ;
 alert('請(qǐng)正確輸入電話');
 }else if(!reg_email.test(email)){
 judge = false ;
 alert('郵箱格式不正確');
 }else if(!reg_name.test(username)){
 judge = false ;
 alert('用戶(hù)名格式不正確');
 }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 style='text-align:center;color:blue;cursor:pointer;' onclick='updateRow(this);'>修改</a>&nbsp<a style='text-align:center;color:blue;cursor:pointer;' onclick='delRow(this);'>刪除</a>";
 var x = document.getElementById('table').insertRow(1); //獲取第一行對(duì)象
 
 for(var i=0;i<arr.length;i++){
 x.insertCell(i).innerHTML = arr[i] ; //用循環(huán)把每個(gè)數(shù)據(jù)插入第一行的每一列
 }
 
}
//----新增信息的插入方法-----

//----新增信息-----
function addInfo(){
 
 if(judge()==true){
 alert('添加成功');
 insertInfo(); //執(zhí)行插入
 hideAddInput(); //隱藏添加信息框
 
 }else{
 alert('添加失敗');
 }
}
//----新增信息-----


//----根據(jù)行號(hào)修改信息-----
function updateRow(r){
 row = getRow(r); //把該行號(hào)賦值給全局變量
 showAddInput(); //顯示修改表單
 //提交按鈕替換
 document.getElementById('btn_add').style="display:none" ;
 document.getElementById('btn_update').style="display:block-inline" ;
 insertInputFromQuery(queryInfoByRow(row));
 
}
//----根據(jù)行號(hào)修改信息-----


//----根據(jù)行號(hào)查信息----
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 ; //返回該行數(shù)據(jù)
 
}
//----根據(jù)行號(hào)查信息----

//----把查詢(xún)到的信息放入修改的表單里----
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];
 
}
//----把查詢(xún)到的信息放入修改的表單里----


function updateInfo(){
 if(judge()==true){
 alert('修改成功');
 document.getElementById('table').deleteRow(row);//刪除原來(lái)那行 
 insertInfo(); //插入修改后的值
 hideAddInput(); //隱藏添加模塊
 }else{
 alert('修改失敗');
 hideAddInput();
 }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: