Question

我的网页包含左侧有许多标记的谷歌地图，右侧的HTML表格代表所有标记位置和国家/地区名称（内部标签标记）。该表使用max-height和自动滚动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);                

         });

希望有所帮助

在动态滚动中显示隐藏的项目

1 个答案: