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

Jquery-1实现简单的复选框删除增加操作

2016-06-07 17:55 746 查看
1.实现简单的复选框删除增加操作

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单的复选框删除增加操作</title>
/<span style="font-size:18px;color:#ff0000;">/引用的是jquery-2.2.4.js版本
<script src="js/jquery-2.2.4.js"></script></span>
<script>
$(function(){
$("input[type=checkbox]:eq(0)").change(function(){
var checkvalue=$(this).prop("checked");
<span style="font-size:24px;color:#ff0000;">//not(0)表示不选第一行操作栏</span>
$("input[type=checkbox]:not(0)").prop("checked",checkvalue);
if($(this).prop("checked")){
$("input[type=checkbox]:not(0)").prop("checked","true");
}else{
$("input[type=checkbox]:not(0)").prop("checked","");
}
});
//单条删除
$("td a").click(function(){
//提示框
if(confirm("你确定真的要删除嘛")){
$(this).parent("td").parent("tr").remove();
}
});
//选择框选定的才删除
$("input[value='删除']").click(function(){
//提示框
if(confirm("你确定真的要删除嘛")) {
$("input[type='checkbox']:not(:first):checked").parent("td").parent("tr").remove();
}
});
$("input[value='增加']").click(function(){
//进行字符串拼接
var strShopInfo="<tr>"+
"<td><input type=\"checkbox\"/></td>"+
"<td>张四</td>"+
"<td>1222211111</td>"+
"<td><a href=\"#\" onclick='deleteItem(this)'>删除</a></td>"+
"</tr>";
$("#myTableProduct tbody").append(strShopInfo);
});

});
<span style="font-size:32px;color:#ff0000;">//新定义一个方法以便让增加后数据也能删除，关键点</span>
function deleteItem(obj){
//提示框
if(confirm("确定要删除嘛")) {
$(obj).parent("td").parent("tr").remove();
}
}
</script>
</head>
<body>
<table border="1px" cellspacing="0px" id="myTableProduct">
<tr>
<td><input type="checkbox" />全选</td>
<td>用户名</td>
<td>电话号码</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张三</td>
<td>1222211111</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张四</td>
<td>1222211111</td>
<td><a href="#">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>张五</td>
<td>1222211111</td>
<td><a href="#">删除</a></td>
</tr>
</table>
<input type="button" value="增加"/>
<input type="button" value="删除"/>
</body>
</html>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航