javascript - 使用行跨度在表格中垂直获取下一个表格单元格

Question

我需要在给定单元格下方的表格中找到单元格索引。想象一下，我对 td_end 一无所知，我只是点击 td_start 并需要找到 td_end。示例(需要找到红色单元格(td_end)的索引，知道绿色单元格(td_start)的索引):http://jsfiddle.net/r5BDW/65/

问题是该表将包含大量具有 rowspan 属性的单元格，因此通常按相等索引进行搜索将不起作用。有什么建议可以找到这样的细胞吗？

示例表:

<table border="1" style="width: 100%;">
    <tr><td>111</td><td rowspan="3">22</td><td>3</td></tr>
    <tr><td>111</td><td>3</td></tr>
    <tr><td>111</td><td class="td_start">3</td></tr>
    <tr><td>111</td><td>22</td><td class="td_end">3</td></tr>
    <tr><td>111</td><td>22</td><td>3</td></tr>
    <tr><td>111</td><td >22</td><td>3</td></tr>
</table>

console.log($('.td_start').index() ) // =1
console.log($('.td_end').index() )  // =2

Answer 1

我认为猜测所有可能的 colspan 和 rowspan 组合几乎是一种疯狂的行为。

我会尝试的是字面意思
使用 elementFromPoint

“触摸” selector 元素下方的视觉元素

jsFiddle demo

$.fn.nextVert = function(){
  var b = this[0].getBoundingClientRect();
  var nxtV = document.elementFromPoint(b.left, b.bottom+10);
  if(nxtV.tagName==="TD") return $(nxtV);
};


$('.td_start').nextVert().text("hello");
console.log( $('.td_start').nextVert().index() ); // 2

通过简单地获取 elementFromPoint
从 this 底部值开始 + 一些微小的偏移量(我使用 10px)