javascript - td 到表格顶部的距离(在可滚动的 div 内)？

Question

如何计算被点击的 TD 元素与 table 顶部之间的距离？ offset 在这种情况下不起作用，因为表格位于可滚动的 div 中。

我知道我可以尝试计算之前 TR 行的数量，并为每一行获取它的高度(因为它们可以不同)。但我正在尝试寻找更直接和可能更快的解决方案。还有其他我忘记的方法吗？

您可以在此处找到源代码示例。

https://jsfiddle.net/esa38vhv/

$("#targetTable").on("click", "td", function() {
  alert($( this ).offset().top);

});

table, th, td {
   border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 100px; overflow-y: scroll; border: 1px solid #000000;">
  <table id="targetTable">
    <tr><td>a1</td></tr>
    <tr><td>a2</td></tr>
    <tr><td>a3<br>aa<br>aa<br>aa<br>aa<br>aa<br>a</td></tr>
    <tr><td>a4</td></tr>
    <tr><td>a5</td></tr>
    <tr><td>a6</td></tr>
    <tr><td>a7</td></tr>
    <tr><td>a8</td></tr>
    <tr><td>a9</td></tr>
    <tr><td>a10</td></tr>
    <tr><td>a11</td></tr>
    <tr><td>a12</td></tr>
    <tr><td>a13</td></tr>
    <tr><td>a14</td></tr>
    <tr><td>a15</td></tr>
    <tr><td>16a</td></tr>
    <tr><td>a17</td></tr>
  </table>
</div>

Answer 1

您可以计算表格的偏移量，这是一个负值，您可以从 td 元素中减去该值，并将结果作为距表格顶部的 TD 偏移量。

添加这一行；

alert($( this ).offset().top - $('table').offset().top);

---

工作演示:

$("#targetTable").on("click", "td", function() {
  alert($( this ).offset().top - $('table').offset().top);
  
});

table, th, td {
   border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 100px; overflow-y: scroll; border: 1px solid #000000;">
  <table id="targetTable">
    <tr><td>a1</td></tr>
    <tr><td>a2</td></tr>
    <tr><td>a3<br>aa<br>aa<br>aa<br>aa<br>aa<br>a</td></tr>
    <tr><td>a4</td></tr>
    <tr><td>a5</td></tr>
    <tr><td>a6</td></tr>
    <tr><td>a7</td></tr>
    <tr><td>a8</td></tr>
    <tr><td>a9</td></tr>
    <tr><td>a10</td></tr>
    <tr><td>a11</td></tr>
    <tr><td>a12</td></tr>
    <tr><td>a13</td></tr>
    <tr><td>a14</td></tr>
    <tr><td>a15</td></tr>
    <tr><td>16a</td></tr>
    <tr><td>a17</td></tr>
  </table>
</div>

---

请注意，边框大小是按距离计算的，在这种情况下，这会导致第一个元素的偏移量为 3。