您的位置：首页 > Web前端 > JQuery

jQuery实现用户添加删除,符合条件追加到表格

2017-11-12 19:31 525 查看

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>周六考试</title>
<script type="text/javascript" src="script/jquery-2.1.0.js" ></script>
<script>
$(function(){
$("#btn").click(function(){
var $name = $("#name").val();
var $pass = $("#pass").val();
var $age = $("#age").val();
var $sel1=$("#sel1 option:selected").val();
var $sel2=$("#sel2 option:selected").val();

var $val=$('[name="sex"]:checked').val();
if($name.length<=0||$name==null||$name.trim()==""){
$("#names").html("用户名不能为空");
return false;
}else{
$("#names").html("");
}
if($pass.length<4||$pass.length>16){
$("#passs").html("长度在4-16位之间");
return false;
}else{
$("#passs").html("");
}

if($val==null){

$("#sexs").html("什么也没选中!");

return false;

}

else{

$("#sexs").html("");

}

//向表格添加数据

//创建tr节点

var $tr=$("<tr></tr>");

//创建td节点

var $li0 = "<td><input type='checkbox' class='check' /></td>"

var $li1="<td>"+$name+"</td>";

var $li2="<td>"+$pass+"</td>";

var $li3="<td>"+$age+"</td>";

var $li4="<td>"+$val+"</td>";

var $li5="<td>"+$sel1+"-"+$sel2+"</td>";

//追加到tr中去

$tr.append($li0,$li1,$li2,$li3,$li4,$li5);

//追加到table中

$("#tbs").append($tr);
});

//省市联动

$("#sel1").change(function(){

var s = $(this).val();

if(s=="北京"){

var bj = $("<option>海淀区</option><option>大兴区</option><option>昌平区</option>");

$("#sel2").html(bj);

}

if(s=="河北"){

var hb = $("<option>石家庄</option><option>邯郸</option><option>保定</option>");

$("#sel2").html(hb);

}

if(s=="天津"){

var tj = $("<option>宝坻区</option><option>西青区</option><option>静海区</option>");

$("#sel2").html(tj);

}

});

//全选与全部选的功能

$("#first").click(function(){

var flag = $(this).prop("checked");

$(".check").each(function(){

$(this).prop("checked",flag);

});

});

//删除选中的行的用户数据

$("#btn_del").click(function(){

var num = 0;

$(".check").each(function(){

if($(this).prop("checked")){//判断如果该行复选框被选中

$(this).closest("tr").remove();//就移除该复选框所在的行

num++;

}

});

/*alert("选中了"+num+"个");*/

});
});
</script>
</head>
<body align="center" >
<span style="font-weight: bold; font-family: '微软雅黑';">用户注册</span>
<form id="info" method="get">
<table align="center" border="1px solid #000" cellpadding="5" cellspacing="0">
<tr>
<td style="font-weight: bold;">用户名</td>
<td><input type="text" placeholder="用户名不能为空" id="name"/><span id="names"></span></td>
</tr>
<tr>
<td style="font-weight: bold;">密码</td>
<td><input type="password" placeholder="长度在4-16位之间" id="pass" /><span id="passs"></span></td>
</tr>
<tr>
<td style="font-weight: bold;">年龄</td>
<td><input type="number" placeholder="年龄必须是数字" id="age" /></td>
</tr>
<tr>
<td style="font-weight: bold;">性别</td>
<td><input type="radio" value="男" name=
4000
"sex" />男<input type="radio" value="女" name="sex" />女<span id="sexs"></span></td>
</tr><tr>
<td style="font-weight: bold;">住址</td>
<td>省<select id="sel1"><option>北京</option><option>河北</option><option>天津</option></select>
市<select id="sel2"><option>海淀</option><option>昌平</option><option>大兴</option></select></td>
</tr>
<tr>
<td><input type="button" id="btn" value="提交" /></td>
</tr>
</table>
</form>
<br /><br />
<button id="btn_del">批量删除</button>
<br /><br />
<table align="center" id="tbs" border="1px solid #000" cellpadding="5" cellspacing="0">
<tr>
<td><input type="checkbox" id="first" /></td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>住址</td>
</tr>
</table>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航