Question

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

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

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

$("#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);

工作演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

您可以执行以下操作，并使用position()方法。

＆＃13;

$("#targetTable").on("click", "td", function() {
  console.log($(this).position().top);
});

＆＃13;

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

＆＃13;

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

＆＃13;

td到表格顶部之间的距离（在可滚动的div内）？

2 个答案: