テーブル内の特定の行にスクロールする方法

Question

ねえグラフと表を持つアプリをビルドしました。 HighChartsライブラリとテーブルを使用したグラフは単純なテーブルです。

今、私はグラフの中にいくつかの点を挙げて、テーブルに10ポイントと10サンプルと言っています。

ポイントをクリックすると、コールバックが実行されました。コールバックテーブル内の特定の行を、およびidを使用して強調表示し、scrollTopを使用してハイライトされている特定の行にスクロールします。

細かい点ですべてうまく動作し、ポイントがクリックされ、スクロールして強調表示された右の行にスクロールします。

大量のデータを扱うときに、200ポイントと200サンプルと言うことがありますが、今度は正しい行が強調表示されていますが、scrollTopアクションには行がありません私が少しスクロールしない限り、行を強調表示します。

この例題を小さなjsfiddleで実証するのは難しいので、私が行ったことを説明します。 次のコードでは、実行されたコールバックを表示し、サンプルとポイントの間の共通IDを使用してハイライトアクションに関連する最初の2行を無視します。

4行目から、目的のサンプルのインデックスを読み取ることができます。 次に、テーブルをターゲットとして保存し、テーブルの2番目の子の高さを読み取ります（テーブルの見出しは無視します）。

次に、animateとscrollTopをHeight * indexに呼び出します。これは、上から行の高さを計算したことを意味します。 は、高さが43、その後、最初の行の

最初のサンプルは、上から0 * 43の距離を持って、最初の行の

第二のサンプルは、1 * 43の距離を有することになると言うことができますトップは、最初の行の

第三のサンプルは、最初の行の

Nサンプルは、（N-1）の距離を持って、上から2 * 43の距離を有するであろう* 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); 
     }; 

テーブルには、どのように2000行はjqueryののscrollTopスプライトを使用して言うことができますが、テーブル内の特定の行にscrollTopスプライトしている、結論としてこの

<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> 

ように私の質問を見ていますか？

Answer 1

ネイティブwindow.scrollには2つの引数window.scroll(x-direction, y-direction)が必要です。したがって、特定の要素にスクロールするには、window.scroll(element.offsetLeft, element.offsetTop)。