当前位置：首页 > 全部内容 > JavaScript实现HTML表格动态增删改查功能

JavaScript实现HTML表格动态增删改查功能

作者：像素漫游时间：2026-10-30 12:37:13浏览：462

本文介绍如何使用JavaScript对HTML表格进行动态的增删改查操作。通过DOM操作实现页面加载时初始化数据，点击按钮弹出层录入信息，并对用户名、密码、姓名等字段进行严格的格式验证。代码包含完整的HTML结构与JS逻辑，支持内存中的数据管理，适合前端开发学习参考。

JavaScript实现HTML表格动态增删改查功能

本文分享了一段使用JavaScript实现HTML表格增删改操作的完整代码示例，供读者参考学习。

具体需求如下：

HTML表格结构定义

构建一个HTML页面，其中包含一个用于存储用户信息的表格。表格字段需包括：用户名、密码、姓名、邮箱、电话、QQ号以及身份证号。

动态增删改查逻辑实现

接下来通过JavaScript实现对该表格数据的动态增删改查功能（仅限内存操作）。首先，在页面加载时，使用JS预置3条初始记录。页面提供一个“增加记录”按钮，点击后弹出一个DIV层供用户输入数据。所有输入字段必须符合指定的格式要求且不能为空：

用户名需由英文、数字及下划线组成；密码需包含英文、数字、下划线且长度超过6位；姓名需为中文；邮箱、电话、QQ及身份证号均需符合各自的标准格式。每条现有记录均提供“修改”和“删除”功能。修改操作与增加类似，但需先读取并显示原有数据值。

HTML页面代码示例

以下是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>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>
 用户名:（用户名只能用英文+数字或下划线）<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>

JavaScript代码示例

以下是配套的JavaScript代码：


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>&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] ; //用循环把每个数据插入第一行的每一列
 }
 
}
//----新增信息的插入方法-----

//----新增信息-----
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();
 }
}

以上就是本文的全部内容，希望对读者学习有所帮助，也欢迎大家继续支持本站。

作者最新文章

D3.js 处理大规模数据点的性能优化策略

2026-11-05 15:37:25

JS实现网页摄像头实时扫码：结合getUserMedia与jsQR教程

2026-11-05 15:27:28

D3.js v5 迁移到 v7 的 API 变更与注意事项

2026-11-05 11:57:17

使用 animate.js 实现多元素协同的序列动画

2026-11-04 22:27:53

JS拖拽排序时怎么添加平滑动画效果？FLIP技术实战

2026-11-04 10:12:22