I have an issue related to scrolling table.
When the page is loaded, the first row (ROW 1) will be default selected row (highlighted row). If we click next button the next row will be selected and highlighted. The issue is if the ROW >= 8 (e.g ROW 9, 10...) being selected, the table do not automatically scroll so we can not see the current selected is also being highlighted.
Behaviours should be as follow image:
当选择 ROW 8 时，表格应该自动滚动。此时，下一行（ROW 9）是可见的，并且顶行应该是不可见的。
我的目的是在当前选定的行中我还可以看到下一行。当我单击下一个/上一个按钮时，表格应该滚动，直到到达最后一个可见行，然后该行将成为最后一行之前的行。
我没有任何想法来解决这个问题。 请帮我。
此致， 肯.
下面的代码片段利用窗口滚动到特定的tr of the table.
每次单击下一个/上一个时都会增加/减少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>