<!DOCTYPE html>
<html>
<head>
<title>用户关系表</title>
<script type="text/javascript" src="C:\Users\Administrator\Desktop\jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function(){
//删除单个
function deleteUser(_this){
var $this=$(_this);
var $tr=$this.parents("tr");
$tr.remove();
}
//删除所有
function deleteAll(_this){
var $this=$(_this);
var $tr=$("tbody tr");
$tr.empty();
}
//求最大数
function maxNo(){
var max=0;
var tr=$("table tbody tr");
if(tr.length==0){
max=0;
}else{
var td=$("table tbody tr td[flag='no']");
$.each(td,function(index,item){
var no=parseInt($(item).text());
if(no>max){
max=no;
}
})
}
return max;
}
//校验用户名
$("#names").change(function(){
var user=/^[\u4e00-\u9fa5a-z]+$/gi;
var userName=$("input[name='userName']").val();
var userFlag=user.test(userName);
if(userFlag==false){
$("input[name='userName']").val("");
return alert("用户名格式错误");
}
})
//校验年龄
$("#age").change(function(){
var age=/\d+/;
var userAge=$("input[name='userAge']").val();
var ageFlag=age.test(userAge);
if(ageFlag==false){
$("input[name='userAge']").val("");
return alert("年龄格式错误");
}
})
//提交
$("#submit").click(function(){
var userName=$("input[name='userName']").val();
var userAge=$("input[name='userAge']").val();
var userLove=$("input[name='userLove']:checked");
var loves=[];
$.each(userLove,function(index,item){
var value=$(item).val();
loves.push(value);
});
var user={};
user.name=userName;
user.age=userAge;
user.love=loves;
if(userName=="" || userAge=="" || userLove.length==0){
return alert("信息未完善");
}
var $tbody=$("table tbody");
var code=[];
code.push("<tr>");
code.push("<td flag='no'>"+(maxNo()+1)+"</td>");
code.push("<td>"+user.name+"</td>");
code.push("<td>"+user.age+"</td>");
code.push("<td>"+user.love.join(",")+"</td>");
code.push("<td><a href='#' onclick='deleteUser(this)'>删除</a></td>");
code.push("</tr>");
var codes=[];
codes.push("<tr id =deleteAll>");
codes.push("<td><a href='#' onclick='deleteAll(this)'>删除所有</td>")
codes.push("</tr>");
$tbody.append(code.join());
$tbody.after(codes.join());
//$("input[name='userName']").val("");
//$("input[name='userAge']").val("");
});
//重置
$("#reset").click(function(){
$("input[name='userName']").val("");
$("input[name='userAge']").val("");
var userLove=$("input[name='userLove']:checked");
var loves=[];
$.each(userLove,function(index,item){
var value=$(item)
value.removeAttr("checked");
});
})
window.deleteUser=deleteUser;
window.deleteAll=deleteAll;
window.maxNo=maxNo;
})
</script>
<style type="text/css">
.user{
position: absolute;
left: 500px;
font-size: 20px;
}
table.hovertable{
font-size: 15px;
border-color: #999999;
border-collapse: collapse;
padding-left: 20px;
}
table.hovertable td{
width: 132px;
height: 18px;
border-width: 1px;
padding: 10px;
border-style:solid;
border-color: #a9c6c9;
font-weight:bold;
}
</style>
</head>
<body>
<p class="user"><b>用户管理</b></p>
<p style="padding-top: 40px; font-size: 20px"><b>用户注册</b></p>
<p>姓名 : <input type="" id="names" name="userName" placeholder="请输入姓名">
<p>年龄 : <input type="" id="age" name="userAge" placeholder="请输入年龄">
<p>爱好 :
<input type="checkbox" name="userLove" value="篮球">篮球
<input type="checkbox" name="userLove" value="足球">足球
<input type="checkbox" name="userLove" value="乒乓球">乒乓球
</p>
<p>
<button id="submit" value="提交">提交</button>
<button id="reset" value="重置">重置</button>
</p>
<table class="hovertable">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>爱好</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
jquery 实现用户关系表
最新推荐文章于 2020-11-16 22:31:31 发布