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

JQuery的表单的添加、删除

2017-10-10 19:18 351 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
姓名：<input type="text" id="np">  年龄：<input type="number" id="pu"> 性别：<input type="text" id="ut" >   <input type="button" value="添加" id="in" >
<table>
<tr>
<th><input type='checkbox' id="ip">全选</th>
<th> 姓名</th>
<th> 年龄</th>
<th> 性别</th>
<th> 操作</th>
</tr>

</table>
<script>
var n=0;
$("#in").click(function () {
//获取输入的姓名
var xm=   $("#np").val();
var nl=   $("#pu").val();
var xb=   $("#ut").val();
//  alert(  $("#np").val())
//创建节点
$("table").append("<tr>"+"<td>"+"<input type='checkbox'>"+"</td>"+"<td>"+xm+"</td>"+"<td>"+nl+"</td>"+"<td>"+xb+"</td>"+"<td>"+"<span>删除</span>"+"</td>"+"</tr>");

$("table tr td span").click(function () {
//判断当前这个复选框被勾选了才能被删除
if($(this).parents("tr").find("input").prop("checked")==true){

$(this).parents("tr").remove();

}

});

});

//给"全选"一个点击事件，如果全选就把添加的input都设为true
$("#ip").click(function () {
if($("#ip").prop("checked")==true){
$("tr td input").prop("checked",true);
}else{
$("tr td input").prop("checked",false);
}
});

//把添加的input设置点击事件,在进行判断是否被勾选，计数器勾选一个就累计一个，然后判断input的长度和计数器是否相等，相等的话就把“全选的input勾选”
$("table").on("click","input",function () {
alert(0);
if($(this).prop("checked")==true){
n++;
}else{
n--;
}
if(n==$("tr td input").length){
$("#ip").prop("checked",true);
}else{
$("#ip").prop("checked",false);
}
});

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航