Ukryj / pokaż kolumnę w tabeli HTML

Mam tabelę HTML z kilkoma kolumnami i muszę zaimplementować selektor kolumn przy użyciu jquery. Kiedy użytkownik kliknie pole wyboru, chcę ukryć / pokazać odpowiednią kolumnę w tabeli. Chciałbym to zrobić bez dołączania klasy do każdego td w tabeli. Czy istnieje sposób, aby wybrać całą kolumnę za pomocą jquery? Poniżej znajduje się przykład kodu 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>

Chciałbym to zrobić bez dołączania klasy do każdego td

Osobiście wybrałbym podejście klasy na każdym td / th / col. Następnie możesz włączać i wyłączać kolumny za pomocą pojedynczego zapisu do className w kontenerze, zakładając reguły stylu, takie jak:

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

To będzie szybsze niż jakakolwiek pętla JS; w przypadku naprawdę długich tabel może mieć znaczący wpływ na szybkość reakcji.

Jeśli możesz uniknąć obsługi IE6, możesz użyć selektorów przylegania, aby uniknąć konieczności dodawania atrybutów klasy do tds. Lub alternatywnie, jeśli Twoim problemem jest wyczyszczenie znaczników, możesz dodać je automatycznie z JavaScript w kroku inicjalizacji.

Jedna linia kodu używająca jQuery, która ukrywa drugą kolumnę:

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

Jeśli twoja tabela ma nagłówek (th), użyj tego:

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

Źródło: Ukryj kolumnę tabeli za pomocą jednego wiersza kodu jQuery

jsFiddle, aby przetestować kod: http://jsfiddle.net/mgMem/1/

Jeśli chcesz zobaczyć dobry przypadek użycia, spójrz na mój post na blogu:

Ukryj kolumnę tabeli i pokoloruj wiersze na podstawie wartości za pomocą jQuery .

możesz użyć grup grup:

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

Twój skrypt mógłby wtedy zmienić tylko <col>klasę pożądania .

Powinni to zrobić:

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

Jest to kod nieprzetestowany, ale zasada jest taka, że ​​w każdym wierszu wybiera się komórkę tabeli, która odpowiada wybranemu indeksowi wyodrębnionemu z nazwy pola wyboru. Możesz oczywiście ograniczyć selektory za pomocą klasy lub identyfikatora.

Oto trochę bardziej funkcjonalna odpowiedź, która zapewnia interakcje użytkownika na podstawie poszczególnych kolumn. Jeśli ma to być dynamiczne doświadczenie, w każdej kolumnie musi znajdować się przełącznik, który można kliknąć, wskazujący możliwość ukrycia kolumny, a następnie sposób przywrócenia wcześniej ukrytych kolumn.

W JavaScript wyglądałoby to mniej więcej tak:

$('.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()

})

Aby to wesprzeć, dodamy trochę znaczników do tabeli. W nagłówku każdej kolumny możemy dodać coś takiego, aby zapewnić wizualny wskaźnik elementu, który można kliknąć

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

Umożliwimy użytkownikowi przywrócenie kolumn za pomocą linku w stopce tabeli. Jeśli domyślnie nie jest trwały, to dynamiczne włączenie go w nagłówku może przepychać się wokół stołu, ale naprawdę możesz go umieścić w dowolnym miejscu:

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

To podstawowa funkcjonalność. Poniżej znajduje się demo z kilkoma dodatkowymi elementami. Możesz także dodać podpowiedź do przycisku, aby pomóc wyjaśnić jego przeznaczenie, nieco bardziej organicznie nadać przyciskowi styl nagłówka tabeli i zwinąć szerokość kolumny, aby dodać kilka (nieco dziwacznych) animacji CSS, aby przejście było trochę mniejsze nerwowy.

Działające demo w jsFiddle & Stack Snippets:

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

I oczywiście tylko CSS dla przeglądarek obsługujących nth-child :

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

Dotyczy to przeglądarki IE9 i nowszych.

W swoim przypadku potrzebowałbyś kilku klas, aby ukryć kolumny:

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

ect ...

Poniższy fragment opiera się na kodzie Erana, z kilkoma drobnymi zmianami. Przetestowałem to i wydaje się, że działa dobrze w przeglądarce 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>

Bez klasy? Możesz wtedy użyć tagu:

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

I pokazać im użycie:

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