jQuery - Count number/Get Index of rowspan rows

Question

I'm trying to figure out how to get the index of the current rowspanned "row" (even though its the cell that is rowspanned).

<table>
    <tr>
        <td rowspan="2">First</td>
        <td> First 1 1 </td>
        <td> First 2 1 </td>
    </tr>
    <tr>
         <td> First 2 1 </td>
         <td> First 2 2 </td>
    </tr>
    <tr>
        <td rowspan="2">Second</td>
        <td> Second 1 1 </td>
        <td> Second 2 1 </td>
    </tr>
    <tr>
         <td> Second 2 1 </td>
         <td> Second 2 2 </td>
    </tr>
</table>

If I clicked on any cell in the table, how can I count which "row-spanned" row I'm at?

For example if I click on any of the "Second" cells, I should get "2" and if I click on any of the "First" cells, I should get "1".

I've tried multiple things include this:

row=$(this).parent().parent().children('tr').filter(function (index) {
    return $(this).children('td[rowspan]'); }).index($(this).parent());

and

row=$(this).parent().parent().children('tr:contains("td[rowspan]")')
    .parent().parent().index($(this).parent());

and sort-of got it to work with

$row=$(this).parent();
while ($row.children('td:eq(0)').attr("rowspan").length<=0)
    $row=$row.prev();
span=$row.children('td:eq(0)').attr("rowspan");
row=Math.floor( parseInt($(this).parent().parent().children().index( $(this).parent()) )/span );

but this will only work give that there is a rowspan cell... and is assuming that all rows have that same rowspan

I tried working off these site, but couldn't get too far.

jquery selector to count the number of visible table rows?
JQuery: How to select rows from a table
Table row and column number in jQuery

Answer 1

One way is to build an array from the rowspan attributes of the cells in the first column. From there, you can get the index of the clicked row and iterate over the rowspan array, subtracting the extents of the spans as you go. Once you go below zero, you have your (zero-based) index:

$("td").click(function() {
    var $this = $(this);
    var rowIndex = $this.closest("tr").index();
    $this.closest("table").find("tr").map(function() {
        return $(this).find("td:first").attr("rowspan") || 1;
    }).each(function(index) {
        if ((rowIndex -= this) < 0) {
            alert(index + 1);  // 'index' is zero-based.
            return false;
        }
    });
});

You can test it in this fiddle.

Answer 2

var table = $('table');                     // reference of table
$('td').click(function() {
  var perent = $(this).parent();            // find parent tr
      index= table.find(perent).index();    // get index of tr
   alert( index );
});

DEMO

var table = $('table');
$('td').click(function() {
    var tdWithRowSpan = $(this).siblings('td[rowspan]').length ?  // if siblings td[rowspan] exists
                            $(this).siblings('td[rowspan]') :     // get that td
                              $(this).parent().prev('tr').find('td[rowspan]'); // else find closest td[rowspan]


    index = table.find('td[rowspan]').index(tdWithRowSpan); // get index
    alert(index);
});

DEMO

Answer 3

Not sure if this is what you want; but consider adding data attributes to your markup to make your life easier...

<table>
    <tr data-index="0">
        <td rowspan="2">First</td>
        <td> First 1 1 </td>
        <td> First 2 1 </td>
    </tr>
    <tr data-index="1">
         <td> First 2 1 </td>
         <td> First 2 2 </td>
    </tr>
    ...
</table>

With this in place, getting the value is trivial:

$(this).parent().attr("data-index");