<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> table { text-align: center; } td { border: 1px solid #000; width: 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>
代码效果如下图：
时间： 2024-10-20 18:30:53