1

I need to find index of cell in table below a given cell. Imagine that I don't know anything about td_end, I just click at td_start and need to find td_end. Example (need find index of red cell(td_end), knowing index of green cell (td_start)): http://jsfiddle.net/r5BDW/65/

Problem that table will contain a lot of cells with rowspan attr, so usual searching by equal index will not work. Any advice how to find such cells?

example table:

<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
2
  • 1
    Please include all relevant code within your question. IF jsFiddle goes down, as it frequently does, your question would be unanswerable. Nov 11, 2014 at 8:13
  • 1
    Any expected value. Just need to find right cell (or its index) Nov 11, 2014 at 8:19

2 Answers 2

1

I think that would be almost a crazy act to guess all the possible colspan and rowspan combinations.

What I would try with, is to literally
"touch" the element that is visually beneath the selector element using 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

by simply getting the elementFromPoint
starting from the this bottom value + some tiny offset (I used 10px)

2
  • maybe I will use it, tnx Nov 11, 2014 at 8:36
  • @user1931780 the above is just an idea, you can improve the code by letting it handle things like .nextVert("td") etc... Nov 11, 2014 at 9:15
1

chek this solution: http://jsfiddle.net/r5BDW/68/

find td with same left position

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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.