如何计算被点击的 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>
最佳答案
您可以计算表格的偏移量,这是一个负值,您可以从 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。
关于javascript - td 到表格顶部的距离(在可滚动的 div 内)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48742600/