Я создал скрыть / показать столбец таблицы с помощью флажка, который теперь работает хорошо после того, как щелкнул флажок скрытого столбца таблицы, но я столкнулся с проблемой, чтобы таблица отображала все столбцы вместе в одной таблице. Вот мой код:

$("input:checkbox").click(function(){
      let column = "."+$(this).attr("name");
      $(column).toggle();
  });

  $("#display-all").click(function(){
      let column = "."+$(this).attr("name");
      $(column).show();
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="display-all" type="button">Display all</button>
<div>
    <ul>
        <li><input type="checkbox" name="id" checked>ID</li>
        <li><input type="checkbox" name="catalogue" checked>Catalogue Name</li>
    </ul>
</div>

<table>
    <thead>
    <tr>
        <th class="id">ID</th>
        <th class="catalogue">Catalogue Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="id">56797</td>
        <td class="catalogue">DIESEL S NENTISH W EU-39</td>
    </tr>
    </tbody>
</table>
0
Solaiman Hossain 16 Апр 2020 в 11:11

1 ответ

Лучший ответ

Здесь у вас есть атрибут name на флажке, но не на кнопке
И вы хотите, чтобы ВСЕ th и td внутри table tr отображались при нажатии кнопки

$("input:checkbox").click(function(){
      let column = "."+$(this).attr("name");
      $(column).toggle();
  });

  $("#display-all").click(function(){
      $("table tr th, table tr td").show();
      $("input").prop("checked", true);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="display-all" type="button">Display all</button>
<div>
    <ul>
        <li><input type="checkbox" name="id" checked>ID</li>
        <li><input type="checkbox" name="catalogue" checked>Catalogue Name</li>
    </ul>
</div>

<table>
    <thead>
    <tr>
        <th class="id">ID</th>
        <th class="catalogue">Catalogue Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="id">56797</td>
        <td class="catalogue">DIESEL S NENTISH W EU-39</td>
    </tr>
    </tbody>
</table>
0
Dharmang 16 Апр 2020 в 08:27