我有一个与滚动表相关的问题。
当页面加载时，第一行(ROW 1)将是默认选中的行(高亮行)。如果我们点击下一步按钮，下一行将被选中并突出显示。问题是如果 ROW >= 8(例如 ROW 9、10...)被选中，表格不会自动滚动，因此我们看不到当前选中的也被突出显示。
行为应如下图所示:
选择第8行时，应自动滚动表。此时，下一行(第 9 行)是 VISIBLE，最上面的行应该是不可见的。
我的目的是在当前选定的行我也可以看到下一行。当我单击下一个/上一个按钮时，表格应该滚动直到到达最后一个可见行，然后该行将成为最后一行之前的行。
我不知道如何解决这个问题。 请帮助我。
最好的问候， 肯。
最佳答案
下面的代码片段利用窗口滚动到 table 的特定 tr。
在每次下一个/上一个点击时分别增加/减少 selectedIndex 并滚动到表中该行的索引。
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
$scope.selectedIndex = 0;
$scope.rows = ["Row1", "Row2", "Row3", "Row4", "Row5", "Row6", "Row7", "Row8", "Row9", "Row10", "Row11", "Row12", "Row13", "Row14", "Row15", "Row16", "Row17", "Row18"];
$scope.NextRow = function() {
$scope.selectedIndex = $scope.selectedIndex === $scope.rows.length - 1 ? $scope.rows.length - 1 : $scope.selectedIndex + 1;
var w = $(window);
var row = $('table').find('tr').eq($scope.selectedIndex);
if (row.length) {
w.scrollTop(row.offset().top - (w.height() / 2));
}
}
$scope.PrevRow = function() {
$scope.selectedIndex = $scope.selectedIndex === 0 ? 0 : $scope.selectedIndex - 1;;
var w = $(window);
var row = $('table').find('tr').eq($scope.selectedIndex);
if (row.length) {
w.scrollTop(row.offset().top - (w.height() / 2));
}
}
});body {
padding-top: 50px;
}
.anchor {
border: 2px dashed DarkOrchid;
padding: 5px 5px 5px 5px;
}
.fixed-header {
background-color: rgba(0, 0, 0, 0.2);
height: 50px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.fixed-header>a {
display: inline-block;
margin: 5px 15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<div class="fixed-header">
<button ng-click="PrevRow()">Previous button </button>
<button href="" ng-click="NextRow()">Next button </button>
</div>
<div>
<table>
<tbody>
<tr ng-repeat="row in rows">
<td class="anchor" ng-style="selectedIndex == $index && {'background-color':'lightblue'}">{{row}}</td>
</tr>
</tbody>
</table>
</div>
</body>关于javascript - 当所选行是最后一行的前一行时自动滚动表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44388042/