JS增删改HTML表格
要求如下：
写一个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();
}
}
本人初学，学艺不精，如有错误，或不足指出，还望指出，感激不尽！！
JS增删改HTML表格的更多相关文章
- jQuery动态增删改查表格信息，可左键/右键提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 增删改查
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- JS 增删改查操作XML
效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- js 增删改查方法
push() 向数组的末尾添加一个或多个元素 pop() 删除数组内部并返回数组的最后一个元素 shift() 把数组内部的第一个元素从其中删除,并返回第一个元素的值 unshift() 向数组外部的 ...
- JS增删改查localStorage实现搜索历史功能
<script type="text/javascript"> var referrerPath = "@ViewBag.ReferrerPath" ...
- webpack4+express+mongodb+vue 实现增删改查
在讲解之前,我们先来看看效果如下所示: 1)整个页面的效果如下: 2) 新增数据效果如下: 3) 新增成功如下: 4) 编辑数据效果如下: 5) 编辑成功效果如下: 6) 删除数据效果如下: 7) 删 ...
- JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...
- jQuery EasyUI/TopJUI实现数据表格的增删改查功能（不写js,纯HTML实现!!!）
jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
随机推荐
- QT 操作数据库
整理一下 QT 操作数据库的一些要点,以备以后的查询学习(主要是操作 mysql ). 首先,要查询相关的驱动是否已经装好了,可以用以下的程序进行验证: #include <QtCore/QCo ...
- jquery的学习
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒.可选的 callback 参数是动画 100% 完成后所执行的函 ...
- 1.4.2 solr字段类型--(1.4.2.5)使用枚举字段
1.4.2 solr字段类型 (1.4.2.1) 字段类型定义和字段类型属性. (1.4.2.2) solr附带的字段类型 (1.4.2.3) 使用货币和汇率 (1.4.2.4) 使用Dates(日期 ...
- 【开源项目5】测滑菜单MenuDrawer的使用以及解析
在安卓中左右侧滑菜单的使用用的比ios多得多,可能是谷歌带的头吧,几乎所有的谷歌应用都有侧滑菜单.谷歌没有开放这个源码,在一个成熟的开源代码出现之前,大家都是各自为战,偶尔能看到一个勉强实现了的.Me ...
- Hosts文件是什么？
Hosts文件主要作用是定义IP地址和主机名的映射关系,是一个映射IP地址和主机名的规定.可以用文本文件打开!当用户在浏览器中输入一个需要登录的 网址时,系统会首先自动从Hosts文件中寻找对应的IP ...
- Oracle基础 事务
一.事务 事务就是业务上的一个逻辑单元,它能够保证其中对数据所有的操作,要么全部成功,要么全部失败. 二.事务的特性: 1.原子性:事务是SQL中的最小执行单位,不能再进行分割.要么全部执行,要么全部 ...
- Windows8不联网直接安装.Net 3.5 Framework的方法
把你的系统ISO加载到虚拟光驱或插入系统安装盘,找到X:\sources\sxs路径(X是你的光驱盘符).输入下面命令,盘符以D盘为例DISM /Online /Enable-Feature /Fea ...
- BOM/ROUTING/PO/WIP等模块常用查询
常用查询scripts /*bom*/ select p_item.segment1,c_item.segment1,bic.COMPONENT_QUANTITY,bic.COMPONENT_YIEL ...
- Linux命令之cut
cut:文件的每一行剪切字节.字符和字段并将这些字节.字符和字段写至标准输出.如果不指定 File 参数,cut 命令将读取标准输入.必须指定 -b.-c 或 -f 标志之一. 主要参数: -b(by ...
- 浅析console和浏览器命令行API
一.console对象: F12或者Control+Shift+i(Win)/ Alt+Command+i(Mac)打开浏览器自带的开发工具,选择顶部tab中的最后一项console,这样你就可以尽情 ...