我有一个带表的AngularJS应用程序,我想获得这种情况:

第一:我想使用表引导类来创建一个流畅的表;

第二:在对表头进行一些javascript更改之后(重构th),我想要获得相同的流体表。

我的代码(回复后更新):Pen

Java脚本

var app = angular.module("myApp",[]);

app.controller("MainCtrl",['$scope', function($scope){
  $scope.currentThWidth = [];
  $scope.convertedWidth = [];
  var helpArray = [];
  $scope.show = function(){
    $scope.reset();
    jQuery('.table').find('th').each(function(index,column){
      helpArray.push(column.offsetWidth);
      $scope.currentThWidth.push('th' + index + ': ' + ' ' + column.offsetWidth + 'px');
    });
  };
  $scope.convert = function(){
    $scope.show();
    for(i in helpArray){
      var temp = (helpArray[i]/(jQuery(window).width()))*100;
      // temp = Translate the offsetWidth in % according to the container's width
      $scope.convertedWidth.push('th' + i + ': ' + temp.toFixed(2) + '%');
      jQuery('table thead th:nth-child' + '(' + i + ')').css('width',temp.toFixed(2) + '%');
    }
  };
  $scope.reset = function(){
    $scope.currentThWidth = [];
    $scope.convertedWidth = [];
    helpArray = [];
    jQuery('table thead th').removeAttr('style');
  };
}]);




为什么我的宽度不一样?我没有相同的表格显示状态。执行我的javascript函数后,th宽度小于初始宽度。为什么呢

最佳答案

您没有将计算应用于所有th

在您的示例中,最后一个th永远不会更新。我将您的for(i in helpArray)更改为jQuery.each()

像这样 :

jQuery('table thead th').each(function(i, tableHead) {
      $scope.convertedWidth.push('th' + i + ': ' +
      (helpArray[i]/(jQuery(window).innerWidth()))*100 + '%');
      jQuery(this).css('width', helpArray[i] + '/' +
      jQuery(window).innerWidth() + '*100%');
    })


如果您发现我没有使用toFixed(),因为这会舍入数字并弄乱浏览器呈现的像素数量。因此,最好的方法是使用自然的浏览器计算。

helpArray[i]/jQuery(window).innerWidth() + '*100%'

由于每个浏览器以不同的方式呈现,因此我让CSS进行数学计算。

输出将是这样的:

<th style="width: 100/1100 * 100%;">

和完整的代码:



var app = angular.module("myApp", []);

app.controller("MainCtrl", ['$scope',
  function($scope) {
    $scope.currentThWidth = [];
    $scope.convertedWidth = [];
    var helpArray = [];
    $scope.show = function() {
      $scope.reset();
      jQuery('.table').find('th').each(function(index, column) {
        helpArray.push(column.offsetWidth);
        $scope.currentThWidth.push('th' + index + ': ' + ' ' + column.offsetWidth + 'px');
      });
    };
    $scope.convert = function() {
      $scope.show();
      jQuery('table thead th').each(function(i, tableHead) {
        $scope.convertedWidth.push('th' + i + ': ' + (helpArray[i] / (jQuery(window).innerWidth())) * 100 + '%');
        jQuery(this).css('width', helpArray[i] + '/' + jQuery(window).innerWidth() + '*100%');
      })

    };
    $scope.reset = function() {
      $scope.currentThWidth = [];
      $scope.convertedWidth = [];
      helpArray = [];
      jQuery('table thead th').removeAttr('style');
    };
  }
]);

html {
  padding: 0;
  margin: 0;
}
table thead tr {
  background: grey;
  color: yellow;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>

<div class="container-fluid" ng-app="myApp" ng-controller="MainCtrl">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>th 0</th>
        <th>th 1</th>
        <th>th 2</th>
        <th>th 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
    </tbody>
  </table>
  <button class="btn btn-primary" ng-click="show()">Show offsetWidth</button>
  <button class="btn btn-success" ng-click="convert()">Convert to %</button>
  <button class="btn btn-warning" ng-click="reset()">Reset all widths</button>
  <h2 style="color:#337ab7;">Current table head offset-width: {{currentThWidth}}</h2>
  <h2 style="color:#5cb85c;" ng-if="convertedWidth.length">Converted width %: {{convertedWidth}}</h2>
</div>

10-05 20:44
查看更多