表格添加与删除

来源：互联网发布：人肉搜索网络团队论坛编辑：程序博客网时间：2024/05/17 23:24
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        table{            border-collapse: collapse;        }        th,td{            padding: 10px;            border: 1px solid ;        }        .bs{            background: darkgrey;        }    </style>    <script src="../angular-1.5.5/angular.js"></script>    <script>        var myapp = angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            $scope.data=[{                name:"张三",                age:"23",                sr:"1995-04-24"            },{                name:"李思",                age:"33",                sr:"1985-02-20"            },{                name:"王武",                age:"45",                sr:"1973-06-21"            }];            //添加            $scope.show=false;            $scope.add=function () {                $scope.show=true                for(var i=0;i<$scope.data.length;i++){                    if($scope.name==$scope.data[i].name){                        alert("重复");                        return;                    }                    if($scope.name==null||$scope.age==null){                        alert("为空");                        return;                    }                }                if($scope.corr==true){                    //console.log(1)                    $scope.data[$scope.index].sr=$scope.sr;                }else{                    //console.log(0)                    $scope.data.push({name:$scope.name,age:$scope.age,sr:$scope.sr});                }                $scope.sr="";            };            $scope.push=function () {//                for(var i=0;i<$scope.data.length;i++){//                    if($scope.name==$scope.data[i].name){//                        alert("重复");//                        return;//                    }//                    if($scope.name==null||$scope.age==null){//                        alert("为空");//                        return;//                    }//                }//                if($scope.corr==true){//                    //console.log(1)//                    $scope.data[$scope.index].sr=$scope.sr;////                }else{//                    //console.log(0)//                    $scope.data.push({name:$scope.name,age:$scope.age,sr:$scope.sr});//                }//                $scope.sr="";            };            //删除            $scope.del=function (index) {                console.log(index);                $scope.data.splice(index,1);                if (confirm("确定要删除吗？")){                    $scope.del.splice(index,1);                }            };        });    </script></head><body ng-app="myapp" ng-controller="myCtrl"><span>姓名:</span><input type="text" ng-model="name"><span>年龄:</span><input type="text" ng-model="age"><span>生日:</span><input type="text" ng-model="sr"><button ng-click="add()">添加</button><table>    <thead>    <tr class="bs">        <th>姓名</th>        <th>年龄</th>        <th>生日</th>        <th>删除</th>    </tr>    </thead>    <tbody>    <tr ng-repeat="item in data">        <td>{{item.name}}</td>        <td>{{item.age}}</td>        <td>{{item.sr}}</td>        <td><button ng-click="del($index)">删除</button></td>    </tr>    </tbody></table><!--<table ng-show="show">-->    <!--<tr>-->        <!--<td>姓名</td>-->        <!--<td><input type="text" ng-model="name"></td>-->    <!--</tr>-->    <!--<tr>-->        <!--<td>年龄</td>-->        <!--<td><input type="text" ng-model="age"></td>-->    <!--</tr>-->    <!--<tr>-->        <!--<td>生日</td>-->        <!--<td><input type="text" ng-model="sr"></td>-->    <!--</tr>-->    <!--<tr>-->        <!--<td colspan="2"><button ng-click="push()">添加</button></td>-->    <!--</tr>--><!--</table>--></body></html>checkAll全选删除与提交<!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>    <style>        *{            margin: 0;            padding: 0;        }        table{            border-collapse: collapse;            margin-top:50px;        }        th,td{            width: 80px;            height: 40px;            line-height: 40px;            text-align: center;            border:1px solid #000;        }    </style></head><body><input type="text" value="zs">姓名<input type="text" value="20">年龄<input type="text" value="女">性别<button type="button" class="tj">提交</button><br/><table>    <thead>    <tr>        <th><input type="checkbox" class="checkAll">全选</th>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>        <th>操作</th>    </tr>    </thead>    <tbody>    <!--<tr>        <td><input type="checkbox"></td>        <td>zs</td>        <td>20</td>        <td>nan</td>        <td><button>删除</button></td>    </tr>-->    </tbody></table><script>    //计数器    var n=0;    $(".tj").click(function(){        var name=$("input").eq(0).val();        var age=$("input").eq(1).val();        var sex=$("input").eq(2).val();        var add="<tr><td><input type='checkbox'></td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td><td><button>删除</button></td></tr>"        $("table").append(add);    });    /*$("tbody button").click(function(){     alert(0)     })*/    $("tbody").on("click","button",function(){        $(this).parents("tr").remove();    });    //点击全选，下面的全部选择    $(".checkAll").click(function(){        //console.log($(this).prop("checked"));        if($(this).prop("checked")==true){            $("tbody input").prop("checked",true);        }else{            $("tbody input").prop("checked",false);        }    });    //下面的选择点击    $("tbody").on("click","input",function(){        if($(this).prop("checked")==true){            n++;        }else{            n--;        }        if(n==$("tbody input").length){            $(".checkAll").prop("checked",true);        }else{            $(".checkAll").prop("checked",false);        }    });</script></body></html>
阅读全文
0 0