Скрыть / показать столбец в таблице HTML

Я бы хотел сделать это без привязки класса к каждому td

Лично я бы выбрал подход class-on-each-td / th / col. Затем вы можете включать и выключать столбцы, используя одну запись в className в контейнере, предполагая такие правила стиля, как:

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

Это будет быстрее, чем любой подход с использованием цикла JS; для действительно длинных таблиц это может существенно повлиять на скорость отклика.

Если вы можете обойтись без поддержки IE6, вы можете использовать селекторы смежности, чтобы избежать добавления атрибутов класса в tds. Или, в качестве альтернативы, если вы хотите сделать разметку более чистой, вы можете автоматически добавить их из JavaScript на этапе инициализации.

Одна строка кода с использованием jQuery, которая скрывает второй столбец:

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

Если в вашей таблице есть заголовок (th), используйте это:

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

Источник: Скрыть столбец таблицы с одним строка кода jQuery

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

Если вы хотите увидеть хороший вариант использования, взгляните на мой пост в блоге:

Скрыть столбец таблицы и раскрасить строки на основе значения с помощью jQuery.

Вот немного более подробный ответ, который обеспечивает некоторое взаимодействие с пользователем для каждого столбца. Если это будет динамический опыт, в каждом столбце должен быть активный переключатель, который указывает на возможность скрытия столбца, а затем способ восстановления ранее скрытых столбцов.

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

вы можете использовать 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>

тогда ваш скрипт может просто изменить свой <col> класс.