CODEWITHSUNDEEP
jqueryhtmlhide
Abdullah Mamun-Ur- Rashid
Abdullah Mamun-Ur- Rashid

Reputation: 698

how to hide row with rowspan

I have a table with rowspan at starting and ending column. Layout is:

<input type="button" id="btn" value="Hide" />
<div id="result">
<table>
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Hide</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">Col1</td>
        <td>col2</td>
        <td>col3</td>
        <td rowspan="2"><input type="checkbox" value="" /></td>
    </tr>
     <tr>
         <td>col2</td>
         <td>col3</td>
     </tr>
     <tr>
         <td>Col1</td>
         <td>col2</td>
         <td>col3</td>
         <td><input type="checkbox" value="" /></td>
    </tr>
    </tbody>
</table>
</div>

and the jquery code is:

$("#btn").on("click",function(){
    $('#result > table').find('input:checkbox:checked').closest('tr').toggle();
});

It will be expected to hide the row1 and row2 simultaneously as there is only one chekbox for both row (rowspan), but it is not happening. It is only hiding row1.

How it can be resolved?

JSFIDDLE

Upvotes: 4

Views: 2957

Answers (3)

Yow
Yow

Reputation: 63

EDIT : Let's do it shorter, and working for every case : Updated JsFiddle

$("#btn").on("click",function(){
    $('#result > table').find('input:checkbox:checked').each(function() {

        // let's take each row, and its rowspan value
        var thistr = $(this).closest('tr');
        var howmuch = thistr.find('td[rowspan]').attr('rowspan');
        if(typeof(howmuch)==='undefined') {howmuch=1;}        
    
        // looping and toggling
        for(var i=0; i<howmuch; i++) {
            thistr.toggle();
            thistr=thistr.next();
        }
    });
});

old post :

This Updated JsFiddle will do

You have to take the first parent TR, then start a loop to the sibling TRs depending on the "rowspan" value of it...

$("#btn").on("click",function(){
    var aa = $('#result > table').find('input:checkbox:checked').closest('td[rowspan]');
    var thetr=aa.closest('tr');

    for(var i=0; i<aa.attr('rowspan'); i++) {
        thetr.toggle();
        thetr=thetr.next();
    }
});

The syntax may be perfectible, but you get the idea.

By the way, it works even if multiple rowspans exists next to each other, which isn't the case of the accepted answer, I think...?

Upvotes: 1

Pete
Pete

Reputation: 58432

You could do a check to see if the next row has less rows - if it does it is a rowspan so you can hide it:

$("#btn").on("click",function(){
    var row = $('#result > table').find('input:checkbox:checked').closest('tr'),
        rowspan = row.next();

    row.toggle();
    if (rowspan.children().length < row.children().length) {
        rowspan.toggle();
    }
});

Updated fiddle

Edit

As per comment - solution for any amount of rowspans in any column:

$("#btn").on("click",function(){    
    $('#result > table').find('input:checkbox:checked').closest('tr').each(function() {
        var row = $(this),
            columns = row.children('td[rowspan]'),
            rowsToSpan = 0;

        row.toggle();

        if (columns.length) {
            columns.each(function() {
                var thisRowSpan = parseInt($(this).attr('rowspan'));
                if (thisRowSpan > rowsToSpan) {
                    rowsToSpan = thisRowSpan;
                }
            });

            var nextRow = row.next();
            for (var i = 1; i < rowsToSpan; i++) {
                nextRow.toggle();
                nextRow = nextRow.next();
            }
        }
    });
});

Fiddle

Upvotes: 3

guradio
guradio

Reputation: 15555

$("#btn").on("click",function(){
$('#result > table').find('input:checkbox:checked').closest('tr').toggle();
    $('#result > table').find('input:checkbox:checked').closest('tr').next().toggle();
    
});

FIDDLE

I used .next() to select the next tr that should be hidden

Upvotes: 1

Related Questions