表格添加与删除

最新推荐文章于 2021-10-04 17:35:25 发布

gh323093

最新推荐文章于 2021-10-04 17:35:25 发布

阅读量123

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/gh323093/article/details/78468119

版权

Web前端专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!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>

gh323093

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格添加与删除

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> table{ border-collapse: collapse; } th,td{ padding: 10px;
复制链接

扫一扫