要求如下:
写一个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>
新闻热点
疑难解答
图片精选