文章/答案/技术大牛

发布

社区首页 >问答首页 >如何获取表格行中单元格的完整位置(顶部和左侧)？

问如何获取表格行中单元格的完整位置(顶部和左侧)？
EN

Stack Overflow用户

提问于 2018-12-27 17:46:27

回答 1查看 1.1K关注 0票数 0

我正在使用React JS中的一个表。

我有这个代码演示-这是我在CodeSandbox - https://codesandbox.io/s/2wp7jk23kr中的演示

我的表中有多个列。现在，在任何列中，比如第1列到第10列，我希望有一个函数可以计算特定单元格元素(div)的位置。如何获取特定div在表格单元格中的位置。请回答关于我的演示。我正在尝试获取数据单元格的位置，而不是标题单元格的位置

在某种程度上，我使用的是React和vanilla JS。我不能使用jQuery。

如果可能，您可以使用fork/modify来展示如何在我的表中引入此功能。

我找不到在我的代码上工作的解决方案。

请告诉我如何查找表格和页面的位置

html

css

reactjs

javascript

回答 1

Stack Overflow用户

发布于 2018-12-27 18:19:32

要计算表中的单元格偏移量，可以使用getBoundingClientRect()

const tableRect = document.querySelector('table').getBoundingClientRect();
const cellRect  = document.querySelector('#cell').getBoundingClientRect();
    
    console.log(
        cellRect.left - tableRect.left,  // x
        cellRect.top  - tableRect.top    // y
    )

#cell { background: gold; }

<h1>Lorem ipsum</h1>
<table>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td id="cell">Find Me</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
</table>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53942935

复制

相似问题

问如何获取表格行中单元格的完整位置(顶部和左侧)？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取表格行中单元格的完整位置(顶部和左侧)？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获取表格行中单元格的完整位置(顶部和左侧)？
EN