Скрыть и показать столбец таблицы и отобразить все столбцы вместе - PullRequest
0 голосов
/ 16 апреля 2020

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

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

1 Ответ

0 голосов
/ 16 апреля 2020

Здесь у вас есть атрибут имени на флажке, но не на кнопке
И вы хотите показать ВСЕ 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...