Question

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

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

示例表：

<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

“触摸” 选择器元素元素下的可视元素
<强> 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
从这个底部值开始+一些小偏移量（我使用10px）

Answer 2

谢谢这个解决方案：http://jsfiddle.net/r5BDW/68/

找到具有相同左侧位置的td

<强>的jQuery

$(document).ready(function() {
    var $td2=$('.td_start2');
    fidnBelow($td2);

    var $td=$('.td_start');
    fidnBelow($td);
});

function fidnBelow($td)
{
    var rez='';

    var p=$td.position();
    var left=p.left;

    var td_count=$('tr').size();
    var ind_tr=$td.parent().index();
    var $table=$('#table');
    ind_tr++;


    for(i=ind_tr;i<td_count;i++)
    {
        var $below_tr=$table.find('tr').eq(i)

        $below_tr.find('td').each(function(){
            var tp=$(this).position();
            var tleft=tp.left;

            if(left==tp.left) rez=$(this).html();                    
        })

        if(rez!='') break;
    }

    alert(rez);
}

使用rowspans在表格中垂直获取下一个表格单元格

2 个答案: