| <style> | |
| table{ | |
| border: 1px solid gray; | |
| border-collapse: collapse; | |
| width: 1000px; | |
| text-align: center; | |
| } | |
| table th, table td{ | |
| border: 1px solid gray; | |
| } | |
| .cl0:hover{ | |
| cursor: pointer; | |
| background-color: orange; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div title="info" style="display: none;background-color: white;padding: 20px 40px;margin: 0 auto; width: 400px;position: absolute;"> | |
| <h1>个人信息</h1> | |
| 序号： <input type="text" readonly/><br/> | |
| 姓名： <input type="text"/><br/> | |
| 性别： <select style="width: 153px;" name="sex" id="sex"><option>男</option><option>女</option></select><br/> | |
| 电话： <input type="text"/><br/> | |
| 生日： <input type="text"/><br/> | |
| email： <input type="text"/><br/> | |
| 地址： <input type="text"/><br/> | |
| 备注： <textarea style="resize: none;" name="desc" id="desc" cols="19" rows="6"></textarea><br/> | |
| <input type="button" value="修改" οnclick="infochange()"/> | |
| <input type="button" value="关闭" οnclick="infoclose()"/><br/> | |
| </div> | |
| <div id="zzc" | |
| style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: gray;opacity: 0.8;display: none;"></div> | |
| <ol>说明： | |
| <li>表格内显示的当前人员信息</li> | |
| <li>当点击表格的内容行时，显示下面被隐藏的表单元素块，同时将该行的数据填充到对应的表单元素中</li> | |
| <li>当点击显示的表单元素按钮时，将表单元素中的数据填充到对应序号的表格中，修改其中的内容，同时表单元素块隐藏</li> | |
| <li>当然常规的验证请大家自己搞定（验证规则按常规约定请自己定义）</li> | |
| </ol> | |
| <table> | |
| <tr> | |
| <th>序号</th> | |
| <th>姓名</th> | |
| <th>性别</th> | |
| <th>手机号</th> | |
| <th>生日</th> | |
| <th>email</th> | |
| <th>地址</th> | |
| <th>备注</th> | |
| </tr> | |
| <tr class="cl0"> | |
| <td>1</td> | |
| <td>张三</td> | |
| <td>男</td> | |
| <td>13312345678</td> | |
| <td>1999-03-15</td> | |
| <td>123456@qq.com</td> | |
| <td>四川省成都市武侯区</td> | |
| <td>屌丝一枚</td> | |
| </tr> | |
| <tr class="cl0"> | |
| <td>2</td> | |
| <td>王嬷嬷</td> | |
| <td>男</td> | |
| <td>13300000000</td> | |
| <td>1993-03-15</td> | |
| <td>1234569999@qq.com</td> | |
| <td>四川省成都市</td> | |
| <td>屌丝</td> | |
| </tr> | |
| <tr class="cl0"> | |
| <td>3</td> | |
| <td>张世礼</td> | |
| <td>男</td> | |
| <td>13388885678</td> | |
| <td>1992-12-15</td> | |
| <td>12888856@qq.com</td> | |
| <td>四川省成都市成华区</td> | |
| <td>屌丝一枚</td> | |
| </tr> | |
| <tr class="cl0"> | |
| <td>4</td> | |
| <td>丽丽</td> | |
| <td>女</td> | |
| <td>13012345678</td> | |
| <td>1991-03-15</td> | |
| <td>193456@qq.com</td> | |
| <td>四川省成都市</td> | |
| <td>屌丝</td> | |
| </tr> | |
| <tr class="cl0"> | |
| <td>5</td> | |
| <td>李斯</td> | |
| <td>男</td> | |
| <td>1330045678</td> | |
| <td>1979-03-15</td> | |
| <td>123156@qq.com</td> | |
| <td>四川省成都市</td> | |
| <td>哈哈</td> | |
| </tr> | |
| <tr class="cl0"> | |
| <td>6</td> | |
| <td>王建国</td> | |
| <td>男</td> | |
| <td>13312366678</td> | |
| <td>1999-02-15</td> | |
| <td>123056@qq.com</td> | |
| <td>四川省成都市</td> | |
| <td>呵呵</td> | |
| </tr> | |
| <tr class="cl0"> | |
| <td>7</td> | |
| <td>万春</td> | |
| <td>女</td> | |
| <td>13312346666</td> | |
| <td>1990-03-15</td> | |
| <td>223456@qq.com</td> | |
| <td>四川省成都市武侯区</td> | |
| <td>.........</td> | |
| </tr> | |
| <tr class="cl0"> | |
| <td>8</td> | |
| <td>注册机</td> | |
| <td>男</td> | |
| <td>13300005678</td> | |
| <td>1988-03-12</td> | |
| <td>123450@qq.com</td> | |
| <td>四川省成都市锦江区</td> | |
| <td>无聊</td> | |
| </tr> | |
| </table> | |
| <input type="button" value="点击" οnclick="t2()"/> | |
| <script> | |
| $("table tr:gt(0)").click(function(){ | |
| var tds=$(this).children("td"); | |
| var ins=$("div[title='info']>:input"); | |
| tds.each(function(i){ | |
| ins.eq(i).val($(this).html()); | |
| }); | |
| $("#zzc").show(); | |
| $("div[title='info']").show(function(){ | |
| $(this).css({ | |
| "z-index":1000, | |
| "left": $(document).width()>$(this).width()?($(document).width()-$(this).width())/2+"px":0, | |
| "top": $(document).height()>$(this).height()?($(document).height()-$(this).height())/2+"px":0 | |
| }); | |
| }); | |
| }); | |
| function infoclose(){ | |
| // $("div[title='info']").hide(); | |
| // $("#zzc").hide(); | |
| $("div[title='info']").slideUp(1000,function(){ | |
| $("#zzc").hide(); | |
| }) | |
| } | |
| function infochange(){ | |
| //先获取所有的表单元素集合 | |
| var ins = $("div[title='info']>:input"); | |
| var bl1=/^[\u4e00-\u9fa5]{2,}$/.test(ins.eq(1).val()); | |
| var bl2=/^1[34578]\d{9}$/.test(ins.eq(3).val()); | |
| var bl3=/^\d{4}-\d{2}-\d{2}$/.test(ins.eq(4).val()); | |
| var bl4=/^\w+((-w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(ins.eq(5).val()); | |
| var bl5=/^.+$/.test(ins.eq(6).val()); | |
| ins.eq(1).next("span").remove(); | |
| ins.eq(3).next("span").remove(); | |
| ins.eq(4).next("span").remove(); | |
| ins.eq(5).next("span").remove(); | |
| ins.eq(6).next("span").remove(); | |
| if(bl1 && bl2 && bl3 && bl4 && bl5){ | |
| //根据表单元素的第一个数字确定修改第几行的数据 | |
| var tds=$("table tr:eq("+ins.eq(0).val()+")").children("td"); | |
| ins.each(function(i){ | |
| tds.eq(i).html(ins.eq(i).val()); | |
| }); | |
| infoclose(); | |
| }else{ | |
| if(!bl1) ins.eq(1).after("<span style='color: red;font-size: 10px;'>姓名只能输入中文，长度至少2个</span>"); | |
| if(!bl2) ins.eq(3).after("<span style='color: red;font-size: 10px;'>手机只能输入11位数字</span>"); | |
| if(!bl3) ins.eq(4).after("<span style='color: red;font-size: 10px;'>日期错误</span>"); | |
| if(!bl4) ins.eq(5).after("<span style='color: red;font-size: 10px;'>邮箱格式错误</span>"); | |
| if(!bl5) ins.eq(6).after("<span style='color: red;font-size: 10px;'>地址不能为空</span>"); | |
| } | |
| } | |
| </script> |