CODEWITHSUNDEEP
jqueryhtml-tablehide
user1768401
user1768401

Reputation: 45

JQuery hide table columns with rowspan

I want to hide a table column, but using jQuery .hide() or .toggle() on columns with rowspan attribute seems to "pass" that attribute to the previous row and mess up the table.

$('#toggle').click(function(){
    $('#tbl td:last-child').toggle();
});

Look at the simple example at: http://jsfiddle.net/SEwVP/

Any ideas?

Upvotes: 1

Views: 1575

Answers (2)

user1768401
user1768401

Reputation: 45

Thanks to the @dystroy for his input.

Based on his answer, here's the simple solution: 

var lastChilds = $('#tbl td:last-child');
lastChilds.each(function(i){
    var rowSpan = $(this).attr('rowspan');
    if(rowSpan !== undefined){
      lastChilds.splice(i+1, rowSpan-1);
    }
    $(this).hide();
  });

Upvotes: 0

Denys Séguret
Denys Séguret

Reputation: 382132

The last td might be of a different column, so that's normal.

In this case where only the last column hold rowspans, you could use the child index :

$('#toggle').click(function(){
    $('#tbl td:nth-child(5)').toggle();
});

If you want a solution valid if you have rowspan in any column, then you'll probably have to precompute for each cell its real column index. It's doable but more it would probably be more rational to use simpler solutions, like having a class depending on the data. It thus would depend on the semantic and production process of your table.

Upvotes: 1

Related Questions