Сховати / показати стовпець у таблиці 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 / th / col. Потім ви можете вмикати та вимикати стовпці, використовуючи єдине записування до className на контейнері, припускаючи правила стилю, такі як:

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

Це буде швидше, ніж будь-який підхід до циклу JS; для дійсно довгих таблиць це може суттєво змінити чуйність.

Якщо ви можете уникнути непідтримки IE6, ви можете використовувати селектори суміжності, щоб не додавати атрибути класу до tds. Або, якщо ви турбуєтесь про те, щоб зробити розмітку чистішою, ви можете додати їх із JavaScript автоматично на етапі ініціалізації.

Один рядок коду за допомогою jQuery, який приховує 2-й стовпець:

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

Якщо ваша таблиця має заголовок (го), скористайтеся цим:

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

Джерело: Сховати стовпчик таблиці з єдиним рядком коду jQuery

jsFiddle для перевірки коду: http://jsfiddle.net/mgMem/1/

Якщо ви хочете ознайомитися з корисним випадком використання, перегляньте мій пост у блозі:

Сховати стовпчик таблиці та розфарбувати рядки на основі значення за допомогою jQuery .

ви можете використовувати колекції:

<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();
    });
});

Це неперевірений код, але принцип полягає в тому, що ви вибираєте комірку таблиці у кожному рядку, яка відповідає обраному індексу, витягнутому з імені прапорця. Звичайно, ви можете обмежити селекторів класом або ідентифікатором.

Ось трохи детальніше відповідь, яка забезпечує деяку взаємодію користувачів на основі кожного стовпця. Якщо це буде динамічним досвідом, на кожному стовпчику має бути натиснута кнопка, що вказує на можливість приховування стовпця, а потім спосіб відновлення раніше прихованих стовпців.

Це буде виглядати приблизно так у 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 & 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>

І звичайно, 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;}

тощо.

Далі будується на коді Ерана з кількома незначними змінами. Протестовано, і, здається, він працює добре на 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';