Geek asks and answers

Hide the table column used by colspan ...?

I read a lot of questions, but did not fit my situation. Here is my table structure

enter image description here

If I want to hide column A or B , below code works for me.

$('table td:nth-child(1),table th:nth-child(1)').hide();
$('table td:nth-child(2),table th:nth-child(2)').hide();

But if I want to remove C or a later column, this will create a problem for me. as below code gave me irrelevant output.

$('table td:nth-child(3),table th:nth-child(3)').hide();

enter image description here

Find the violin for this Link

+3
source share
1 answer

Pure CSS

This can be done using CSS using :not()and +:

tr :nth-child(3),
tr :nth-child(3):not([colspan]) + :nth-child(4) {
    display: none;
}

JSFiddle demo .

, 3- , , 3- , colspan.

C, 3 4.

Update

BoltClock , CSS :nth-child(n), tr. td th, (>):

tr > :nth-child(3),
tr > :nth-child(3):not([colspan]) + :nth-child(4) {
    display: none;
}

, td th .

JQuery

jQuery tr, , , th, colspan, . hideColumn(), n , , :

$(function() {
    function hideColumn(n) {
        var headerColSpan = 1;

        $('tr').each(function(i) {
            var nth = $(this).children()[n-1],
                colspan = $(nth).attr('colspan');

            // Pull ColSpan from first row th element
            if (i === 0)
                headerColspan = colspan || 1;

            if (colspan === headerColspan)
                $(nth).hide();
            else
                for (i=0; i < headerColspan; i++) {
                    $($(this).children()[n-1+i]).hide();
                }
        });
    }

    hideColumn(3);
});

JSFiddle.

+4

More articles:


All Articles