JS对HTML表格进⾏增删改操作
本⽂实例为⼤家分享了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" 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>********</td>
<td>123456789</td>
<td>40040044</td>
<td>270205197405213513</td>
<td><a onclick="updateRow(this);" >修改<a> <a onclick="delRow(this);">删除</a></td> </tr>
<tr>
<td>A2</td>
<td>456</td>
<td>b</td>
<td>********</td>
<td>987654321</td>
<td>30030033</td>
<td>470205197405213513 </td>
<td><a onclick="updateRow(this);">修改<a> <a onclick="delRow(this);">删除</a></td> </tr>
<tr>
<td>A3</td>
<td>789</td>
<td>c</td>
<td>********</td>
<td>800800820</td>
<td>30030030</td>
<td>570205197405213513 </td>
<td><a onclick="updateRow(this);">修改<a> <a onclick="delRow(this);">删除</a></td> </tr>
</table>
</div>
<div 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()" 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.wIndex;
return i ;
}
//----获取⾏号-----
//----删除某⼀⾏-----
function delRow(r){
}
//----删除某⼀⾏-----
//----清除添加信息框的内容-----
function cleanAddInput(){
}
//----清除添加信息框的内容-----
//----显⽰添加信息框-----
function showAddInput(){
cleanAddInput();
}
//----显⽰添加信息框-----
//----隐藏添加信息框-----
function hideAddInput(){
}
//----隐藏添加信息框-----
//----判断输⼊框的信息是否符合要求-----
function judge(){
//根据id获取表单信息
var username = ElementById('username').value;
var password = ElementById('password').value;
var name = ElementById('name').value;
var email = ElementById('email').value;
var phone = ElementById('phone').value;
var qq = ElementById('qq').value;
var uid = ElementById('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==''){
html表单只能输入数字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(!st(email)){
judge = false ;
alert('邮箱格式不正确');
}else if(!st(username)){
judge = false ;
alert('⽤户名格式不正确');
}else if(!st(name)){
judge = false ;
alert('姓名格式不正确');
}else if((!st(password))||password.length<6){
judge = false ;
alert('密码格式不正确');
}
return judge ;
}
//----判断输⼊框的信息是否符合要求-----
//----新增信息的插⼊⽅法-----
function insertInfo(){
/
/根据id获取表单信息
var arr = new Array();
arr[0] = ElementById('username').value;
arr[1] = ElementById('password').value;
arr[2] = ElementById('name').value;
arr[3] = ElementById('email').value;
arr[4] = ElementById('phone').value;
arr[5] = ElementById('qq').value;
arr[6] = ElementById('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 = ElementById('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(); //显⽰修改表单
//提交按钮替换
insertInputFromQuery(queryInfoByRow(row));
}
//----根据⾏号修改信息-----
//----根据⾏号查信息----
function queryInfoByRow(r){
var arr = new Array();
for(var m=0 ; m<7;m++){
arr[m] = ElementById('table').rows[row].cells[m].innerText;
}
return arr ; //返回该⾏数据
}
//----根据⾏号查信息----
//----把查询到的信息放⼊修改的表单⾥----
function insertInputFromQuery(arr){
}
//----把查询到的信息放⼊修改的表单⾥----
function updateInfo(){
if(judge()==true){
alert('修改成功');
insertInfo(); //插⼊修改后的值
hideAddInput(); //隐藏添加模块
}else{
alert('修改失败');
hideAddInput();
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论