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

回答1:

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

回答2:

$("#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

回答3:

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...?

来源：https://stackoverflow.com/questions/32497024/how-to-hide-row-with-rowspan

标签

jquery

html

hide