javascript - 如何将顶部滚动到表格中的特定行

Question

嘿，我已经构建了一个包含图形和表格的应用程序。使用 HighCharts 库的图形和表格是一个简单的表格。

现在我在图表中有几个点让我们说 10 个点和表中的 10 个样本。

当我点击一个点时，会执行回调。回调使用和id 突出显示表中的特定行，并使用scrollTop 滚动到已突出显示的特定行。

在小范围内一切正常，单击该点，我们将顶部滚动到已突出显示的右行。

当我处理大规模数据时，事情开始变得一团糟，比方说 200 个点和 200 个样本。这次正确的行是突出显示的，但是 scrollTop 操作缺少该行，我看不到突出显示行，除非我稍微滚动一下。

很难用一个小的 jsfiddle 来演示这个例子，所以我会解释我做了什么。在下面的代码中，您可以看到执行的回调，忽略前两行与使用 sample 和 point 之间的公共(public) id 的突出显示操作相关的代码。

从第四行可以看出，我读取了想要的样本的索引。然后将表格保存为目标，读取表格的第二个 child 的高度(忽略表格的标题)。

然后我调用animate 和scrollTop 来调用Height*index，也就是说我计算了行从顶部算起的高度。假设高度是 43，

第一行中的第一个样本与顶部的距离为 0*43，

第一行中的第二个样本与顶部的距离为 1*43，

第一行中的第三个样本与顶部的距离为 2*43，

第一行中的 N 个样本与顶部的距离为 (N-1)*43，依此类推。

$scope.highLightRow = function (id) {
            $scope.$apply(function () {
                $scope.selectedId = id;
            });
            var index = $scope.$eval("(detailedData|filter:{id:'" + $scope.selectedId + "'})[0]").index;
            var $target = $('#TableDetailedData');
            var height = $('#TableDetailedData tr:nth-child(2)').height();
            $target.animate({
                scrollTop: ((height || 43) * index)
            }, 500);
        };

表格是这样的

<div id="TableDetailedData" class="row collapse in overflow">
            <table class="table table-bordered table-scrolled">
                <thead class="thead-scrolled">
                    <tr>
                        <th class="font-blue-steel bold">Date</th>
                        <th class="font-blue-steel bold">Time</th>
                        <th class="font-blue-steel bold">Source</th>
                        <th class="font-blue-steel bold">Validity</th>
                        <th class="font-blue-steel bold">H2</th>
                        <th class="font-blue-steel bold">O2</th>
                        <th class="font-blue-steel bold">N2</th>
                        <th class="font-blue-steel bold">CH4</th>
                        <th class="font-blue-steel bold">CO</th>
                        <th class="font-blue-steel bold">C2H6</th>
                        <th class="font-blue-steel bold">C2H4</th>
                        <th class="font-blue-steel bold">C2H2</th>
                    </tr>
                </thead>
                <tbody  id="tableBody">
                    <tr id="{{::item.index}}" ng-repeat="item in detailedData" ng-init="item.index = $index" ng-class="{'bg-yellow-saffron': item.id == selectedId}">
                        <td>{{::item.date}}</td>
                        <td>{{::item.time}}</td>
                        <td>{{::item.source}}</td>
                        <td>{{::item.validity}}</td>
                        <td>{{::item.H2}}</td>
                        <td>{{::item.O2}}</td>
                        <td>{{::item.N2}}</td>
                        <td>{{::item.CH4}}</td>
                        <td>{{::item.CO}}</td>
                        <td>{{::item.C2H6}}</td>
                        <td>{{::item.C2H4}}</td>
                        <td>{{::item.C2H2}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

总而言之，我的问题是，如何使用 jquery 的 scrollTop 将 scrollTop 滚动到一个表中的特定行，比如说 2000 行？

Answer 1

您最好使用 native window.scroll，它接受两个参数 window.scroll(x-direction, y-direction)。因此，要滚动到特定元素，window.scroll(element.offsetLeft, element.offsetTop)。