javascript - 动态显示滚动内的隐藏元素

Question

我有一个网页，其中包含左侧有许多标记的谷歌地图，右侧的 HTML 表格代表所有标记位置和国家/地区名称(标签内)。该表格使用最大高度和自动滚动 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');
             });
         }  

我的 table :

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

         }); 

希望能帮到你