如何自动滚动到水平表中的特定表格单元格

Question

在我目前的项目中,我有一个包含在div中的表,其中有10个单元格水平放置.这是使用下面的代码完成的......

<div id="dashboard">
    <table>
        <tr>
            <td><div id="cell1"></div></td>
            <td><div id="cell2"></div></td>
            <td><div id="cell3"></div></td>
            <td><div id="cell4"></div></td>
            <td><div id="cell5"></div></td>
            <td><div id="cell6"></div></td>
            <td><div id="cell7"></div></td>
            <td><div id="cell8"></div></td>
            <td><div id="cell9"></div></td>
            <td><div id="cell10"></div></td>
        </tr>
    </table>
</div>

我已经有代码说如果用户点击与表格中的单元格对应的按钮,则单元格将突出显示黄色.由于表的宽度大于页面容器的水平宽度,我不得不将div表溢出属性设置为auto.如何使用,如果用户单击某个特定单元格的按钮,该按钮不在视图中或仅在视图中有一部分单元格,则表格将自动水平滚动(左侧或右侧,具体取决于单元格的位置和当前视图)到该特定单元格.

有没有一个JavaScript解决方案可以让我这样做？

Answer 1

要在同一页面中的任何位置滚动,您可以使用以下内容:

使用此标记标记要滚动到的元素:

<a id="cellcontent">

要滚动到该标记,只需使用简单的a标签:

<a href="#cellcontent">go to cell</a>

或者,您可以使用JavaScript尝试:

<script type="text/javascript">    
    function showIt(elID) {
        var el = document.getElementById(elID);
        el.scrollIntoView(true);
    }    
</script>

资料来源:https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

编辑:正如冥王星在评论中建议的那样,更好的方法是将id-tag直接放入单元格中:

<td id="cellcontent">Some content</td>