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

여러 열이있는 HTML 테이블이 있으며 jquery를 사용하여 열 선택기를 구현해야합니다. 사용자가 확인란을 클릭하면 테이블에서 해당 열을 숨기거나 표시하려고합니다. 테이블의 모든 td에 클래스를 첨부하지 않고이 작업을 수행하고 싶습니다 .jquery를 사용하여 전체 열을 선택하는 방법이 있습니까? 아래는 HTML의 예입니다.

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

모든 td에 클래스를 첨부하지 않고이 작업을 수행하고 싶습니다.

개인적으로 class-on-each-td / th / col 접근 방식을 사용합니다. 그런 다음 다음과 같은 스타일 규칙을 가정하여 컨테이너에서 className에 대한 단일 쓰기를 사용하여 열을 켜거나 끌 수 있습니다.

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

이것은 JS 루프 접근 방식보다 빠를 것입니다. 실제로 긴 테이블의 경우 응답성에 큰 차이를 만들 수 있습니다.

IE6를 지원하지 않는 상태에서 벗어날 수 있다면 인접 선택기를 사용하여 클래스 속성을 td에 추가하지 않아도됩니다. 또는 우려가 마크 업을 더 깨끗하게 만드는 경우 초기화 단계에서 JavaScript에서 자동으로 마크 업을 추가 할 수 있습니다.

두 번째 열을 숨기는 jQuery를 사용하는 한 줄의 코드 :

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

테이블에 header (th)가 있으면 다음을 사용하십시오.

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

출처 : 한 줄의 jQuery 코드로 테이블 열 숨기기

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

좋은 사용 사례를 보려면 내 블로그 게시물을 살펴보십시오.

jQuery를 사용하여 테이블 열을 숨기고 값을 기반으로 행을 채색하십시오 .

colgroup을 사용할 수 있습니다.

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

그러면 스크립트가 원하는 <col>클래스 만 변경할 수 있습니다 .

다음과 같이해야합니다.

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

이것은 테스트되지 않은 코드이지만 원칙적으로 확인란 이름에서 추출 된 선택한 인덱스에 해당하는 각 행에서 테이블 셀을 선택하는 것입니다. 물론 클래스 나 ID로 선택자를 제한 할 수 있습니다.

다음은 열별로 사용자 상호 작용을 제공하는 좀 더 완전한 기능을 갖춘 답변입니다. 이것이 역동적 인 경험이 되려면 각 열에 클릭 가능한 토글이 있어야 열을 숨기는 기능을 표시 한 다음 이전에 숨겨진 열을 복원 할 수 있습니다.

JavaScript에서 다음과 같이 보일 것입니다.

$('.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 애니메이션을 추가하여 전환을 조금 줄입니다. 깜짝 놀란.

jsFiddle 및 스택 스 니펫의 실무 데모 :

$(function() {
  // on init
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // on click
  $('.hide-column').click(HideColumnIndex)

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

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

    // find and hide col index
    $table.find("tbody tr, thead tr")
      .children(":nth-child(" + colIndex + ")")
      .addClass('hide-col');
      
    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})

body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>




<table class="table table-condensed table-hover table-bordered table-striped table-hideable">

  <thead>
    <tr>
      <th>
        Controller
        <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>
      </th>
      <th class="hide-col">
        Action
        <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>
      </th>
      <th>
        Type
        <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>
      </th>
      <th>
        Attributes
        <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>
      </th>
  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
      <td>Authorize</td>
    </tr>

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

물론 CSS 는 nth-child 다음 을 지원 하는 브라우저 에만 적용됩니다 .

table td:nth-child(2) { display: none; }

이것은 IE9 이상입니다.

유스 케이스의 경우 열을 숨기려면 여러 클래스가 필요합니다.

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

요법 ...

다음은 Eran의 코드를 기반으로 약간의 변경 사항이 있습니다. 그것을 테스트했으며 Firefox 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>

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

수업이 없습니까? 그런 다음 태그를 사용할 수 있습니다.

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

그리고 그들이 사용하는 것을 보여주기 위해 :

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