복붙노트

[JQUERY] 는 HTML 테이블에 숨기기 / 표시는 열

JQUERY

는 HTML 테이블에 숨기기 / 표시는 열

해결법

  1. 1.개인적으로, 나는 클래스 - 온 - 각 - TD / 일 / COL 접근 방식으로 갈 것입니다. 그런 다음과 같은 스타일 규칙을 가정 용기에 클래스 명에 단일 쓰기를 사용하여 떨어져 열을 전환 할 수 있습니다 :

    개인적으로, 나는 클래스 - 온 - 각 - TD / 일 / COL 접근 방식으로 갈 것입니다. 그런 다음과 같은 스타일 규칙을 가정 용기에 클래스 명에 단일 쓰기를 사용하여 떨어져 열을 전환 할 수 있습니다 :

    table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

    이것은 빠른 임의 JS 루프 방식보다 될 것이다; 정말 긴 테이블이 응답에 큰 차이를 만들 수 있습니다.

    당신이 IE6를 지원하지 않는 멀리 얻을 수 있다면, 당신은 TDS에 클래스 속성을 추가하는 것을 피하기 위해 인접 선택기를 사용할 수 있습니다. 당신의 관심사는 마크 업 청소기를 만드는 경우 또는 양자 택일로, 당신은 초기화 단계에서 자동으로 자바 스크립트에서 그들을 추가 할 수 있습니다.

  2. 2.2 열을 숨 깁니다 jQuery를 사용하여 코드 한 줄 :

    2 열을 숨 깁니다 jQuery를 사용하여 코드 한 줄 :

    $('td:nth-child(2)').hide();

    테이블 헤더 (일)가있는 경우, 이것을 사용 :

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

    출처 : jQuery 코드의 단일 라인 테이블 열 숨기기

    http://jsfiddle.net/mgMem/1/ : jsFiddle 코드를 테스트

    당신이 좋은 사용 사례를보고 싶다면, 내 블로그 게시물에서보세요 :

    테이블 열을 숨기기 jQuery로 값을 기준으로 행을 색상 화.

  3. 3.당신은 colgroups을 사용할 수 있습니다 :

    당신은 colgroups을 사용할 수 있습니다 :

    <table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

    스크립트는 클래스 단지 욕망을 변경할 수 있습니다.

  4. 4.여기에 열 단위로 일부 사용자 상호 작용을 제공하는 좀 더 완전한 기능을 갖춘 대답이다. 이 역동적 인 경험이 될 것입니다 경우, 열을 숨길 수있는 능력을 나타내는 각 컬럼에 클릭 전환하고 이전에 숨겨진 열을 복원하는 방법이 필요합니다.

    여기에 열 단위로 일부 사용자 상호 작용을 제공하는 좀 더 완전한 기능을 갖춘 대답이다. 이 역동적 인 경험이 될 것입니다 경우, 열을 숨길 수있는 능력을 나타내는 각 컬럼에 클릭 전환하고 이전에 숨겨진 열을 복원하는 방법이 필요합니다.

    즉, 자바 스크립트에서 다음과 같이 보일 것입니다 :

    $('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

    이를 지원하기 위해, 우리는 테이블에 일부 마크 업을 추가합니다. 각 열 머리글에서 우리는 뭔가 클릭의 시각적 표시를 제공하기 위해 다음과 같이 뭔가를 추가 할 수 있습니다

    <button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

    우리는 사용자가 테이블 바닥 글에있는 링크를 통해 열을 복원 할 수 있습니다. 그것은 기본적으로 지속적이지의 경우, 테이블 주위 밀다 수있는 헤더에 동적으로의 전환,하지만 당신은 정말 당신이 원하는 어느 곳을 넣을 수 있습니다 :

    <tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

    즉, 기본 기능입니다. 여기에 더 많은 것들이 구체화 부부와 함께 아래의 데모입니다. 또한 좀 덜 전환을하는 일부 (어느 정도 남았습니다) CSS 애니메이션을 추가하기 위해 열 너비를 테이블 헤더에 더 유기적으로 버튼을 그 목적, 스타일 조금 명확히 도움말 버튼에 툴팁을 추가하고 축소 할 수 있습니다 불안해.

    () {(기능 $ // 초기화에 ( ". 테이블 hideable .hide-COL") $ 각 (HideColumnIndex).; // 클릭에 $ ( '. 숨기기 열'). 클릭 (HideColumnIndex) HideColumnIndex 함수 () { VAR $ 엘은 $ (이) =; var에 $ 세포 = $ el.closest를 ( '일, TD') var에 $ 테이블 = $ cell.closest ( '테이블') // 얻을 셀 위치 - https://stackoverflow.com/a/4999018/1366033 VAR colIndex은 $ 셀 [0] .cellIndex + = 1; // 찾아 숨기기 COL 지수 $ table.find ( "TBODY TR, THEAD TR") .children ( "n 번째 자녀 ("+ colIndex + ")") .addClass ( '숨기기-COL'); // 쇼 바닥 글을 복원 $ table.find ( ". 바닥 글 --열을 복원"). 표시 () } 열 바닥 글을 복원 // $ ( ". - 열 복원"). 클릭 (함수 (전자) { var에 $ 테이블 = $ (이) .closest ( '테이블') ( ". 바닥 글 --열을 복원") table.find $. 숨기기 () $ table.find ( "일, TD") .removeClass ( '숨기기-COL'); }) $ ( "[데이터 토글 ="툴팁 "]). 툴팁 ({ 트리거 : '호버' }) }) 몸 { 패딩 : 15 픽셀; } .table-hideable TD, .table-hideable 번째 { 폭 : 자동; 전환 : 폭 .5s 마진 .5s; } .btn-condensed.btn 축합 { 패딩 : 0 5px; 상자없는 그림자를 : 없음; } / * 사용 클래스는 약간의 애니메이션을 가지고 * / .hide-COL { 폭 :! 0 픽셀 중요합니다; 높이 : 0 픽셀 중요한;! 표시 :! 블록 중요합니다; 오버 플로우 : 중요한 숨겨진;! 마진 : 0 중요합니다;! 패딩 : 0 중요합니다;! ! 국경 : 없음 중요한; } <링크 REL = "스타일"TYPE = "텍스트 / CSS"HREF = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"> <링크 REL = "스타일"TYPE = "텍스트 / CSS"HREF = "https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css"> <링크 REL = "스타일"TYPE = "텍스트 / CSS"HREF = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> <스크립트 유형 = "텍스트 / 자바 스크립트"SRC = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"> <표 클래스 = "탁자 축합 테이블 호버 테이블 경계 테이블 스트라이프 테이블 hideable"> <제> 제어 장치 <버튼 클래스 = "당겨 오른쪽 BTN BTN 기본 BTN-응축 숨기기 열"데이터 전환 = "툴팁"데이터 배치 = "바닥"제목 = "열 숨기기"> <제 클래스 = "감추기-COL"> 동작 <버튼 클래스 = "당겨 오른쪽 BTN BTN 기본 BTN-응축 숨기기 열"데이터 전환 = "툴팁"데이터 배치 = "바닥"제목 = "열 숨기기"> <제> 유형 <버튼 클래스 = "당겨 오른쪽 BTN BTN 기본 BTN-응축 숨기기 열"데이터 전환 = "툴팁"데이터 배치 = "바닥"제목 = "열 숨기기"> <제> 속성 <버튼 클래스 = "당겨 오른쪽 BTN BTN 기본 BTN-응축 숨기기 열"데이터 전환 = "툴팁"데이터 배치 = "바닥"제목 = "열 숨기기"> 홈 색인 ActionResult 권한 부여 클라이언트 색인 ActionResult 권한 부여 클라이언트 수정 ActionResult 권한 부여 <일 열 병합 = "4"> 숨겨진 일부 열 - 표시하려면 클릭 모든

  5. 5.다음은이를 수행해야합니다

    다음은이를 수행해야합니다

    $("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

    이 테스트되지 않은 코드이지만, 원리는 당신이 선택한 인덱스에 해당하는 체크 박스의 이름에서 추출하는 각 행의 테이블 셀을 선택한다는 것입니다. 당신은 물론 클래스 또는 ID와 선택기를 제한 할 수 있습니다.

  6. 6.그리고 물론, 브라우저에 대한 유일한 방법 CSS 지원 n 번째 자녀가 :

    그리고 물론, 브라우저에 대한 유일한 방법 CSS 지원 n 번째 자녀가 :

    표 TD : n 번째 자식 (2) {디스플레이 : 없음; }

    이는 IE9 및 최신입니다.

    당신의 유스 케이스의 경우 열을 숨길 수있는 여러 클래스가 필요할 것 :

    .hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

    요법 ...

  7. 7.다음은 몇 가지 사소한 변경과 함께,에 란의 코드를 구축하고있다. 그것을 테스트하고 파이어 폭스 3, IE7에서 잘 작동 보인다.

    다음은 몇 가지 사소한 변경과 함께,에 란의 코드를 구축하고있다. 그것을 테스트하고 파이어 폭스 3, IE7에서 잘 작동 보인다.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<table>
<thead>
    <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
    </tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
</body>
</html>

  8. 8.

    <p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>

  9. 9.클래스없이? 그런 다음 태그를 사용할 수 있습니다 :

    클래스없이? 그런 다음 태그를 사용할 수 있습니다 :

    var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

    그리고 그들에게 보여주기 위해 사용

    ...style.display = 'table-cell';

    10. from https://stackoverflow.com/questions/455958/hide-show-column-in-an-html-table by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 자신의 ISO-8859-1 동등한 사용하여 자바 스크립트에 특별한 UTF-8 문자로 변환합니까?  (0) 2020.10.27
[JQUERY] 내가 대신 성공과 오류의 새로운 jQuery를 AJAX 코드되는 .done ()와 .fail ()를 사용해야  (0) 2020.10.27
[JQUERY] 어떻게 (전체 문서)를 클릭 요소를 얻으려면?  (0) 2020.10.27
[JQUERY] jQuery를 : 테이블의 행의 수를 계산  (0) 2020.10.27
[JQUERY] 어떻게 JQuery와의 각 () 함수에서 / 종료를 깰? [복제]  (0) 2020.10.27
,

티스토리툴바