Ẩn / Hiển thị Cột trong Bảng HTML

Tôi có một bảng HTML với một số cột và tôi cần triển khai trình chọn cột bằng jquery. Khi người dùng nhấp vào hộp kiểm tôi muốn ẩn / hiển thị cột tương ứng trong bảng. Tôi muốn làm điều này mà không cần đính kèm một lớp cho mỗi td trong bảng, có cách nào để chọn toàn bộ một cột bằng jquery không? Dưới đây là một ví dụ về 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>

Tôi muốn làm điều này mà không cần gắn một lớp cho mỗi td

Cá nhân, tôi sẽ đi theo cách tiếp cận class-on-every-td / th / col. Sau đó, bạn có thể bật và tắt các cột bằng cách sử dụng một lần ghi vào className trên vùng chứa, giả sử các quy tắc kiểu như:

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

Điều này sẽ nhanh hơn bất kỳ cách tiếp cận vòng lặp JS nào; đối với các bảng thực sự dài, nó có thể tạo ra sự khác biệt đáng kể cho khả năng đáp ứng.

Nếu bạn có thể thoát khỏi việc không hỗ trợ IE6, bạn có thể sử dụng các bộ chọn kề để tránh phải thêm các thuộc tính lớp vào tds. Hoặc cách khác, nếu mối quan tâm của bạn là làm cho đánh dấu sạch hơn, bạn có thể tự động thêm chúng từ JavaScript trong bước khởi tạo.

Một dòng mã sử dụng jQuery ẩn cột thứ 2:

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

Nếu bảng của bạn có tiêu đề (th), hãy sử dụng:

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

Nguồn: Ẩn một cột bảng với một dòng mã jQuery

jsFiddle để kiểm tra mã: http://jsfiddle.net/mgMem/1/

Nếu bạn muốn xem một trường hợp sử dụng tốt, hãy xem bài viết trên blog của tôi:

Ẩn một cột bảng và tô màu các hàng dựa trên giá trị với jQuery .

bạn có thể sử dụng 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>

kịch bản của bạn sau đó có thể thay đổi chỉ là <col>lớp mong muốn .

Sau đây nên làm điều đó:

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

Đây là mã chưa được kiểm tra, nhưng nguyên tắc là bạn chọn ô bảng trong mỗi hàng tương ứng với chỉ mục đã chọn được trích xuất từ ​​tên hộp kiểm. Tất nhiên bạn có thể giới hạn các bộ chọn với một lớp hoặc ID.

Đây là một câu trả lời đầy đủ tính năng hơn cung cấp một số tương tác người dùng trên cơ sở mỗi cột. Nếu đây sẽ là một trải nghiệm động, cần phải có một nút chuyển đổi có thể nhấp trên mỗi cột cho biết khả năng ẩn cột và sau đó là cách khôi phục các cột bị ẩn trước đó.

Điều đó sẽ trông giống như thế này trong 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()

})

Để hỗ trợ điều này, chúng tôi sẽ thêm một số đánh dấu vào bảng. Trong mỗi tiêu đề cột, chúng ta có thể thêm một cái gì đó như thế này để cung cấp một chỉ báo trực quan về thứ gì đó có thể nhấp

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

Chúng tôi sẽ cho phép người dùng khôi phục các cột thông qua một liên kết trong phần chân trang. Nếu nó không liên tục theo mặc định, thì việc bật nó một cách linh hoạt trong tiêu đề có thể chen lấn quanh bàn, nhưng bạn thực sự có thể đặt nó ở bất cứ đâu bạn muốn:

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

Đó là chức năng cơ bản. Đây là một bản demo dưới đây với một vài điều nữa. Bạn cũng có thể thêm một chú giải công cụ vào nút để giúp làm rõ mục đích của nó, định kiểu nút một cách hữu cơ hơn với tiêu đề bảng và thu gọn chiều rộng cột để thêm một số hình ảnh động css (hơi khó hiểu) để làm cho quá trình chuyển đổi ít hơn một chút tăng vọt.

Trình diễn hoạt động trong đoạn trích jsFiddle & Stack:

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

Và tất nhiên, cách duy nhất CSS cho các trình duyệt hỗ trợ nth-child :

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

Đây là cho IE9 và mới hơn.

Đối với usecase của bạn, bạn cần một vài lớp để ẩn các cột:

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

Vân vân...

Sau đây là xây dựng mã của Eran, với một vài thay đổi nhỏ. Đã thử nghiệm và nó dường như hoạt động tốt trên 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>

Không có lớp học? Bạn có thể sử dụng Thẻ sau đó:

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

Và để hiển thị chúng sử dụng:

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