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

thecodeparadox · Answer 1 · 2012-06-24T05:35:54.120

3

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

edited Jun 24 '12 at 05:35

answered Jun 24 '12 at 05:18

thecodeparadox

86,271
21
138
164

@jao check my answer and demo, I think it will resolve your problem without changing current `HTML` – thecodeparadox Jun 24 '12 at 05:22
That gives me 0->1st row, 1->2nd row, 2-> 3rd row, 3->4th row. I need 1->1st row, 1->2nd row, 2-> 3rd row, 2->4th row. I guess I could divide the row number by 2 and Math.floor it. – jao Jun 24 '12 at 05:22
if you have more than 2 rowspan is it alright to put in a "while not rowspan go prev()?" or will that be bad since it will crash if no rowspan exists? – jao Jun 24 '12 at 22:23
@jao no it will not crash, just give index `-1` – thecodeparadox Jun 25 '12 at 01:21

Frédéric Hamidi · Accepted Answer · 2012-06-24T05:34:31.193

3

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.

edited Jun 24 '12 at 05:34

answered Jun 24 '12 at 05:23

Frédéric Hamidi

258,201
41
486
479

One problem I ran into on the fiddle was if I removed the rowspan from the first row and just had two rows of three cells, the "Second" cells didn't respond on click for some reason... is that just me? – jao Jun 24 '12 at 05:32
@jao, you're right, I was not properly taking the "no rowspan" case into account. This is now fixed. – Frédéric Hamidi Jun 24 '12 at 05:35
Maybe it's just me, but I'm getting "3" when I click on the Second 2 1 and Second 2 2. – m0dE Dec 16 '12 at 17:45

score 2 · Answer 3 · answered Jun 24 '12 at 05:09

2

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

answered Jun 24 '12 at 05:09

McGarnagle

101,349
31
229
260

i know with HTML5 that is "legal", but is that considered good practice? I would definitely make my life easier – jao Jun 24 '12 at 05:11
@jao sure, it's fine as far as I know. Older browsers can still retrieve custom attributes. According to this guy, it even works in IE6: http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 – McGarnagle Jun 24 '12 at 05:20

jQuery - Count number/Get Index of rowspan rows

3 Answers3