jQuery应用 代码片段

<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>
  序号： &nbsp;<input type="text" readonly/><br/>
  姓名： &nbsp;<input type="text"/><br/>
  性别： &nbsp;<select style="width: 153px;" name="sex" id="sex"><option>男</option><option>女</option></select><br/>
  电话： &nbsp;<input type="text"/><br/>
  生日： &nbsp;<input type="text"/><br/>
  email： <input type="text"/><br/>
  地址： &nbsp;<input type="text"/><br/>
  备注： &nbsp;<textarea style="resize: none;" name="desc" id="desc" cols="19" rows="6"></textarea><br/>
  <input type="button" value="修改" onclick="infochange()"/>
  <input type="button" value="关闭" onclick="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="点击" onclick="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>
posted @ 2016-04-02 20:05  xiaye  阅读(198)  评论(0)  编辑  收藏  举报