javascript - 如何使用 offsetWidth 创建响应式表格？

Question

我有一个带有表格的 AngularJS 应用程序，我想获得以下场景:

第一:我想要一个使用table引导类的流体表；

第二:在表头中进行一些JavaScript更改(重建th)后，我想获得相同的流体表。

我的代码(回复帖子后更新):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 函数后，第一个宽度比最初的要小。为什么？

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%;">

完整代码:

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>