[jquery] colspan을 적용한 테이블 열 숨기기…?

순수 CSS

이는 :not()및 +선택기를 사용하여 CSS로 수행 할 수 있습니다 .

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

JSFiddle 데모 .

이것이하는 일은 세 번째 자식을 숨기고 colspan속성 이없는 세 번째 자식 앞의 요소를 숨기는 것 입니다.

테이블에서이 콘텐츠와 세포를 숨 깁니다 C, 3그리고 4.

최신 정보

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속성 이 있는지 확인한 다음 그에 따라 처리 할 수 ​​있습니다. 여기 에서는 숨기려는 열과 관련된 n 개의 인수 hideColumn()를 받아들이는 함수를 호출했습니다 .

$(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 데모 .

출처
https://stackoverflow.com/questions/22008855