jQuery应用 代码片段
Posted 叶夏
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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> | |
序号: <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="修改" 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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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>[email protected]</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> |
以上是关于jQuery应用 代码片段的主要内容,如果未能解决你的问题,请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。