欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2021年04月06日 08:39:36   作者：scnu_yz  
這篇文章主要為大家詳細介紹了JS對HTML表格進行增刪改操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

要求如下：

寫一個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 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>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>
 用戶名:（用戶名只能用英文+數(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="提交" 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; //用于判斷用戶名格式
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').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('請輸入用戶名');
 }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(){
 //根據(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); //獲取第一行對象
 
 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('添加失敗');
 }
}
//----新增信息-----


//----根據(jù)行號修改信息-----
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));
 
}
//----根據(jù)行號修改信息-----


//----根據(jù)行號查信息----
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ù)行號查信息----

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 基于JavaScript實現(xiàn)移除(刪除)數(shù)組中指定元素

    基于JavaScript實現(xiàn)移除(刪除)數(shù)組中指定元素

    在Array對象中有給定的函數(shù)可以刪除數(shù)組中指定的元素，雖然非常好用，但是總感覺看不到摸不著的比較別扭，下面就分享一個自定義的刪除數(shù)組指定索引值元素的函數(shù)，希望給大家一個全新的思路
    2016-01-01
  • Javascript實現(xiàn)找不同色塊的游戲

    Javascript實現(xiàn)找不同色塊的游戲

    先給大家說下游戲規(guī)則：在變化數(shù)量的顏色塊里找出一個不同顏色的塊點擊。下面通過js代碼給大家分享找不同色塊的游戲?qū)崿F(xiàn)方法，需要的朋友參考下吧
    2017-07-07
  • 教你一步步實現(xiàn)一個簡易promise

    教你一步步實現(xiàn)一個簡易promise

    Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案回調(diào)函數(shù)和事件更合理且更強大,這篇文章主要給大家介紹了關(guān)于如何一步步實現(xiàn)一個簡易promise的相關(guān)資料,需要的朋友可以參考下
    2021-11-11
  • webpack配置完熱更新會刷新整個頁面

    webpack配置完熱更新會刷新整個頁面

    本文主要介紹了webpack配置完熱更新會刷新整個頁面,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-11-11
  • javascript 變態(tài)的節(jié)點集合

    javascript 變態(tài)的節(jié)點集合

    今天想實現(xiàn)jQuery的unwrap效果，換言之，就是用其孩子把其父節(jié)點干掉。為了效率，用到文檔碎片，而取孩子時使用到childNodes（返回一個nodeList）
    2010-03-03
  • 表單提交時自動復制內(nèi)容到剪貼板的js代碼

    表單提交時自動復制內(nèi)容到剪貼板的js代碼

    表單提交時自動復制內(nèi)容到剪貼板的js代碼...
    2007-03-03
  • layui-tree實現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點的方法

    layui-tree實現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點的方法

    今天小編就為大家分享一篇layui-tree實現(xiàn)Ajax異步請求后動態(tài)添加節(jié)點的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • es6基礎(chǔ)學習之解構(gòu)賦值

    es6基礎(chǔ)學習之解構(gòu)賦值

    解構(gòu)賦值語法是一個 Javascript 表達式，這使得可以將值從數(shù)組或?qū)傩詮膶ο筇崛〉讲煌淖兞恐?。這篇文章主要給大家介紹了關(guān)于es6基礎(chǔ)學習之解構(gòu)賦值的相關(guān)資料，需要的朋友可以參考下
    2018-12-12
  • JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問題

    JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問題

    這篇文章主要介紹了JavaScript給input的value賦值引發(fā)的關(guān)于基本類型值和引用類型值問題的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • 微信小程序template模版的使用方法

    微信小程序template模版的使用方法

    這篇文章主要給大家介紹了關(guān)于微信小程序template模版的使用方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用微信小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
    2019-04-04

最新評論