JS对HTML表格进行增删改操作

前端技术 2023/09/06 JavaScript

要求如下： 

写一个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>a@qq.com</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>b@qq.com</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>c@qq.com</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();
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/16059

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案