我有一个带表的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>