一種table超出高度自動出滾動條的解決方案

本文轉載自查看原文 2015-09-30 15:12 11406 js

在日常的開發過程中，我們可能會遇到這樣一種需求，在指定高度內顯示table,超過高度時表格出滾動條。

讓我們帶着這個問題，一起來探討吧！

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
 3 <head>
 4     <title></title>
 5     <link href="../css/bootstrap.css" rel="stylesheet" />
 6     <link href="../css/index.css" rel="stylesheet" />
 7 </head>
 8 <body ng-controller="tableCtrl">
 9 <div>
10     <div>
11         <table class="table table-striped table-bordered table-hover table-condensed">
12             <thead>
13                 <tr>
14                     <th>Id</th>
15                     <th>Name</th>
16                     <th>Email</th>
17                     <th>操作</th>
18                 </tr>
19             </thead>
20             <tbody>
21                 <tr ng-repeat="person in persons">
22                     <td ng-bind="person.id"></td>
23                     <td ng-bind="person.name"></td>
24                     <td ng-bind="person.email"></td>
25                     <td ng-click="persons.remove(person)" class="del-person">刪除</td>
26                 </tr>
27             </tbody>
28         </table>
29     </div>
30 </div>
31 <script src="../js/angular.js"></script>
32 <script src="../js/index.js"></script>
33 </body>
34 </html>

html

 1 var app = angular.module("app", []);
 2 
 3 app.controller("tableCtrl", [
 4     '$scope', function($scope) {
 5         $scope.persons = [];
 6         for (var i = 0; i < 15; i++) {
 7             var index = i + 1;
 8             var person = {
 9                 id: index,
10                 name: 'person' + index,
11                 email: 'person' + index + '@qq.com'
12             };
13             $scope.persons.push(person);
14         }
15 
16         //刪除person
17         $scope.deletePerson= function(person) {
18             $scope.persons.remove(person);
19         }
20     }
21 ]);
22 
23 /**
24  *刪除數組指定下標或指定對象
25  */
26 Array.prototype.remove = function (obj) {
27     for (var i = 0; i < this.length; i++) {
28         var temp = this[i];
29         if (!isNaN(obj)) {
30             temp = i;
31         }
32         if (temp == obj) {
33             for (var j = i; j < this.length; j++) {
34                 this[j] = this[j + 1];
35             }
36             this.length = this.length - 1;
37         }
38     }
39 };