首页 > 语言 > JavaScript > 正文

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

2024-05-06 14:52:45
字体:
来源:转载
供稿:网友

要求如下: 

写一个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>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选