скрыть столбец / тд таблицы с помощью jquery

Question

Как мы можем скрыть столбец таблицы, используя jquery

< table >
  < tr >
   < td id="td_1" >name</ td >
   < td id="td_2" >title</ td >
   < td id="td_3" >desc</ td >
  </ tr >
  < tr >
   < td id="td_1" >Dave</ td >
   < td id="td_2" >WEB DEV</ td >
   < td id="td_3" >Blah Blah</ td >
  < /tr >
  < tr >
   < td id="td_1" >Nick< /td >
   < td id="td_2" >SEO< /td >
   < td id="td_3" >Blah Blah and blah< /td >
  < /tr >
< /table >

Итак, предположим, что если кто-то захочет скрыть первый столбец, т. Е. Td_1, из всех строк, то каким будет код?

Спасибо заранее Dave

Answer 1

$(document).ready(function() {
    $("#td_1").hide();
}

Но в идеале вы хотите использовать класс вместо идентификатора.

, поэтому

<table>
  <tr>
   <td class="td_1">name</td>
   <td class="td_2">title</td>
   <td class="td_3">desc</td>
  </tr>
  <tr>
   <td class="td_1">Dave</td>
   <td class="td_2">WEB DEV</td>
   <td class="td_3">Blah Blah</td>
  </tr>
  <tr>
   <td class="td_1">Nick</td>
   <td class="td_2">SEO</td>
   <td class="td_3">Blah Blah and blah</td>
  </tr>
</table>

И тогда вы будете использовать аналогичный код:

$(document).ready(function() {
    $(".td_1").hide()
}

Таким образом, единственное, что изменилось, это хеш (#) в точку (.).Хэш для идентификаторов, Dot для классов.

Еще один способ - использовать селектор nthChild .

$(document).ready(function() {
    $('tr td:nth-child(1)').hide();
}

Где 1 - номер столбца, который необходимо скрыть.

HTH

Answer 2

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

$('#test').click(function() {
    $('th:nth-child(2), tr td:nth-child(2)').hide();
})

$('#test').click(function() {
    $('th:nth-child(2), tr td:nth-child(2)').hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1>
  <tr>
   <th id="td_1">name</th>
   <th id="td_2">title</th>
   <th id="td_3">desc</th>
  </tr>
  <tr>
   <td id="td_1">Dave</td>
   <td id="td_2">WEB DEV</td>
   <td id="td_3">Blah Blah</td>
  </tr>
  <tr>
   <td id="td_1">Nick</td>
   <td id="td_2">SEO</td>
   <td id="td_3">Blah Blah and blah</td>
  </tr>
</table>

<button id='test'>Hide title</button>

Answer 3

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html