帮女票做的报表(用到了angular的一些指令)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table {
            text-align: center;
        }
        td {
            border: 1px solid #000;
             100px;
            height: 20px;
        }
        .hidden {
            display: none;
        }

        tr:nth-child(even) {
            background-color: gray;
        }
    </style>
</head>
<body ng-app="myModule" ng-controller="myController">
<table>
    <thead></thead>
    <tbody>
        <tr ng-repeat="row in rows track by $index">
            <td rowspan="{{arr[$index]}}" ng-class="{hidden: arr[$index]==undefined? true: ''}">{{row[0].value}}</td>
            <td ng-repeat="(key,item) in row" ng-class="{hidden: key==0||key==row.length-1? true: ''}">{{item.value}}</td>
            <td rowspan="{{arr[$index]}}" ng-class="{hidden: arr[$index]==undefined? true: ''}">{{row[row.length-1].value}}</td>
        </tr>
    </tbody>
</table>
</body>
</html>
<script src="../node_modules/angular/angular.js"></script>
<script>
    var myModule = angular.module('myModule', []);
    myModule.controller('myController', ["$scope","$filter",function ($scope,$filter) {

        $scope.rows = [
            [
                {"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
                {"value":"4","column":{"filed":"lxjp_count","text":"数量"}}
            ],
            [{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
                {"value":"4","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
                {"value":"4","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"CZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"操作类型","column":{"filed":"sm","text":"类型名称"}},
                {"value":"4","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"DKFS","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"打开方式","column":{"filed":"sm","text":"类型名称"}},
                {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"DKFS","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"打开方式","column":{"filed":"sm","text":"类型名称"}},
                {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"DKFS","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"打开方式","column":{"filed":"sm","text":"类型名称"}},
                {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"DZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"地址类型","column":{"filed":"sm","text":"类型名称"}},
                {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"DZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"地址类型","column":{"filed":"sm","text":"类型名称"}},
                {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"DZLX","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"地址类型","column":{"filed":"sm","text":"类型名称"}},
                {"value":"3","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}],
            [{"value":"GJ","column":{"filed":"lxjp","text":"类型拼音"}},
                {"value":"国籍","column":{"filed":"sm","text":"类型名称"}},
                {"value":"260","column":{"filed":"lxjp_count","text":"数量"}}]];

        /*
         $scope.rows = [
         [{column:{filed:'createUser',text:'创建用户'},value:'test'},
         {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
         {column:{filed:'haha',text:'哈哈'},value:'333'},
         {column:{filed:'ww',text:'问问'},value:'4444'},
         {column:{filed:'ee',text:'嗯嗯'},value:'444'},
         {column:{filed:'createUser_count',text:'数量'},value:'1'}
         ],
         [{column:{filed:'createUser',text:'创建用户'},value:'weihua'},
         {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
         {column:{filed:'haha',text:'哈哈'},value:'333'},
         {column:{filed:'ww',text:'问问'},value:'4444'},
         {column:{filed:'ee',text:'嗯嗯'},value:'444'},
         {column:{filed:'createUser_count',text:'数量'},value:'2'}
         ],
         [{column:{filed:'createUser',text:'创建用户'},value:'weihua'},
         {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
         {column:{filed:'haha',text:'哈哈'},value:'333'},
         {column:{filed:'ww',text:'问问'},value:'4444'},
         {column:{filed:'ee',text:'嗯嗯'},value:'444'},
         {column:{filed:'createUser_count',text:'数量'},value:'2'}
         ],
         [{column:{filed:'createUser',text:'创建用户'},value:'xinxi'},
         {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
         {column:{filed:'haha',text:'哈哈'},value:'333'},
         {column:{filed:'ww',text:'问问'},value:'4444'},
         {column:{filed:'ee',text:'嗯嗯'},value:'444'},
         {column:{filed:'createUser_count',text:'数量'},value:'3'}
         ],
         [{column:{filed:'createUser',text:'创建用户'},value:'xinxi'},
         {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
         {column:{filed:'haha',text:'哈哈'},value:'333'},
         {column:{filed:'ww',text:'问问'},value:'4444'},
         {column:{filed:'ee',text:'嗯嗯'},value:'444'},
         {column:{filed:'createUser_count',text:'数量'},value:'3'}
         ],
         [{column:{filed:'createUser',text:'创建用户'},value:'xinxi'},
         {column:{filed:'updateTime',text:'更新时间'},value:'22222'},
         {column:{filed:'haha',text:'哈哈'},value:'333'},
         {column:{filed:'ww',text:'问问'},value:'4444'},
         {column:{filed:'ee',text:'嗯嗯'},value:'444'},
         {column:{filed:'createUser_count',text:'数量'},value:'3'}
         ]
         ];*/
        $scope.arr = [];
        $scope.circulate = $scope.rows.length;
        for( var i = 0; i < $scope.circulate; i++){
            var tep = $scope.rows[i] //第二层数组
            //取第二层数组中最后一个对象中的value值，该值用于设置表格合并的数量
            $scope.arr[i] = tep[ tep.length - 1 ].value;
            i += $scope.arr[i]-1;//数组的下一个需要记值的索引
        }

    }]);

</script>


代码效果如下图：





        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/xiaohaifengke/p/5827542.html