Question

我有一个带表的AngularJS应用程序，我想获得这个场景：

首先：我希望使用表引导类来获得流畅的表格;

第二名：在表头中进行一些javascript更改后（重新构建）我想获得相同的流量表。

我的代码（回复帖子后更新）：Pen

的Javascript

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 width 小于初始值。为什么？

Answer 1

您没有将计算应用于所有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%;">

完整代码：

＆＃13;

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');
    };
  }
]);

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用offsetWidth创建响应表？

1 个答案: