動的にスクロール内に隠しアイテムを表示

Question

私は、左側に多くのマーカーを持つGoogleマップと、すべてのマーカー位置と国名（ラベルタグ内）を表すHTMLテーブルを含むWebページを持っています。テーブルはmax-heightとauto-scroll cssを使用しているので、テーブル内のいくつかのアイテムはスクロール内で見えません。

国名をマウスオーバー/マウスアウトすると、関連マーカーがアニメーション化されます。逆に、マーカーをマウスオーバー/マウスアウトすると、テーブル内の関連する国名がラベルカラークラスを変更します。

マーカーをマウスオーバー/マウスアウトすると、スクロール内に隠れているテーブル内の関連アイテムが表示されません。

関連マーカーがマウスオーバーしているときにスクロール内で非表示になっている表に隠しアイテムを動的に表示する方法はありますか？または、アイテムを表示するために動的に自動スクロールしますか？

私のスクリプト：

function MarkerToTableHover(marker) { 
      marker.addListener("mouseover", function(event) { 
      var link_id = parseInt(marker.id); 
      $("#table_selection label[data-id='" + link_id + "']").removeClass('label-info').addClass('label-warning'); 
      }); 
       marker.addListener("mouseout", function(event) { 
       var link_id = parseInt(marker.mid); 
      $("#table_selection label[data-id='" + link_id + "']").removeClass('label-warning').addClass('label-info'); 
      }); 
     } 

マイテーブル：

<div style="max-height: 250px; overflow: auto"> 
      <table id="table_selection" class="table table-striped table-bordered "> 
       <thead> 
        <tr> 
         <th >No</th> 
         <th >Country</th> 
         <th >State</th> 
         <th >City</th> 
         <th>Action</th> 
        </tr> 
       </thead> 
       <tbody> 
        <!--dynamically append--> 
       </tbody> 
      </table> 
     </div> 

Answer 1

あなたのdivタグのIDを作成する必要があります。

<div id="scroll_table" style="max-height: 250px; overflow: auto"> 

を、私はあなたの中にいることと思いますので、あなたがマウスを置いている間、一度に一度ラベル警告をするだけのテーブルあなたはアイテム

 marker.addListener("mouseover", function(event) { 
     var link_id = parseInt(marker.id); 
     $("#table_selection label[data-id='" + link_id + "']").removeClass('label-info').addClass('label-warning'); 

    // add this line : 
     $("#scroll_table").scrollTop($("#scroll_table").scrollTop() + $("#scroll_table .label-warning").position().top);     

     }); 

希望が