Bir HTML Tablosundaki Sütunu Gizle / Göster

Birkaç sütun içeren bir HTML tablom var ve jquery kullanarak bir sütun seçici uygulamam gerekiyor. Bir kullanıcı bir onay kutusunu tıkladığında, tablodaki ilgili sütunu gizlemek / göstermek istiyorum. Tablodaki her td'ye bir sınıf eklemeden bunu yapmak istiyorum, jquery kullanarak tüm bir sütunu seçmenin bir yolu var mı? Aşağıda bir HTML örneği verilmiştir.

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

Bunu her td'ye bir sınıf eklemeden yapmak istiyorum

Şahsen, sınıfın her biri için td / th / col yaklaşımını kullanırdım. Ardından, aşağıdaki gibi stil kurallarını varsayarak, kapsayıcıdaki className'e tek bir yazma özelliğini kullanarak sütunları açıp kapatabilirsiniz:

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

Bu, herhangi bir JS döngü yaklaşımından daha hızlı olacak; gerçekten uzun tablolar için yanıt verme konusunda önemli bir fark yaratabilir.

IE6'yı desteklemekten kurtulabilirseniz, sınıf özniteliklerini tds'ye eklemek zorunda kalmamak için bitişik seçiciler kullanabilirsiniz. Veya alternatif olarak, endişeniz işaretlemeyi daha temiz hale getiriyorsa, bunları bir başlatma adımında otomatik olarak JavaScript'ten ekleyebilirsiniz.

2. sütunu gizleyen jQuery kullanan bir kod satırı:

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

Tablonuzun başlığı (th) varsa, şunu kullanın:

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

Kaynak: Tek satırlık bir jQuery koduyla Tablo Sütununu Gizleme

jsFiddle kodu test etmek için: http://jsfiddle.net/mgMem/1/

İyi bir kullanım örneği görmek istiyorsanız, blog yazıma bir göz atın:

JQuery ile bir tablo sütununu gizleyin ve satırları değere göre renklendirin .

kolagrupları kullanabilirsiniz:

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

o zaman senaryonuz sadece arzu <col>sınıfını değiştirebilir .

İşte sütun başına bir miktar kullanıcı etkileşimi sağlayan biraz daha tam özellikli bir cevap. Bu dinamik bir deneyim olacaksa, her sütunda, sütunu gizleme yeteneğini gösteren tıklanabilir bir geçiş ve ardından önceden gizlenmiş sütunları geri yükleme yolu olması gerekir.

Bu, JavaScript'te şuna benzer:

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

})

Bunu desteklemek için tabloya bazı işaretlemeler ekleyeceğiz. Her bir sütun başlığına, tıklanabilir bir şeyin görsel bir göstergesi sağlamak için buna benzer bir şey ekleyebiliriz.

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

Kullanıcının tablo alt bilgisindeki bir bağlantı aracılığıyla sütunları geri yüklemesine izin vereceğiz. Varsayılan olarak kalıcı değilse, başlıkta dinamik olarak açmak, tablonun etrafında dolanabilir, ancak gerçekten istediğiniz yere koyabilirsiniz:

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

Temel işlev budur. İşte aşağıda birkaç şeyin daha açıklandığı bir demo. Ayrıca, düğmenin amacını netleştirmek, düğmeyi bir tablo başlığına göre biraz daha organik bir şekilde biçimlendirmek ve geçişi biraz daha az yapmak için bazı (biraz riskli) css animasyonları eklemek için sütun genişliğini daraltmak için bir araç ipucu ekleyebilirsiniz. ürkek.

JsFiddle ve Yığın Parçacıkları'nda Çalışma Demosu :

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

Aşağıdakiler bunu yapmalıdır:

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

Bu test edilmemiş koddur, ancak ilke, her satırda, onay kutusu adından çıkarılan seçilen dizine karşılık gelen tablo hücresini seçmenizdir. Elbette seçicileri bir sınıf veya kimlik ile sınırlayabilirsiniz.

Ve tabii ki CSS, şunları destekleyen tarayıcılar için tek yol nth-child:

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

Bu, IE9 ve daha yeni sürümler içindir.

Kullanım durumunuz için, sütunları gizlemek için birkaç sınıfa ihtiyacınız olacak:

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

ect ...

Aşağıdakiler, birkaç küçük değişiklikle Eran'ın kodu üzerine inşa ediliyor. Test edildi ve Firefox 3, IE7'de iyi çalışıyor gibi görünüyor.

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

Sınıfsız mı? Etiketi daha sonra kullanabilirsiniz:

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

Ve onlara şunu kullandığını göstermek için:

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