Sandbox Test Page 3

<! Чекбоксы управления >
<label><input type="checkbox" class="toggle-col" data-col="2" checked> Показать столбец 2</label>
<label><input type="checkbox" class="toggle-col" data-col="3" checked> Показать столбец 3</label>
<label><input type="checkbox" class="toggle-row" data-row="2" checked> Показать строку 2</label>
<label><input type="checkbox" class="toggle-row" data-row="3" checked> Показать строку 3</label>

<br><br>

<! Таблица >
<table id="myTable" border="1">
  <thead>
    <tr>
      <th>Колонка 1</th>
      <th>Колонка 2</th>
      <th>Колонка 3</th>
    </tr>
  </thead>
  <tbody>
    <tr data-row="1">
      <td>1-1</td><td>1-2</td><td>1-3</td>
    </tr>
    <tr data-row="2">
      <td>2-1</td><td>2-2</td><td>2-3</td>
    </tr>
    <tr data-row="3">
      <td>3-1</td><td>3-2</td><td>3-3</td>
    </tr>
  </tbody>
</table>

<script>
  При загрузке страницы
  document.addEventListener('DOMContentLoaded', function() {
    const checkboxesCol = document.querySelectorAll('.toggle-col');
    const checkboxesRow = document.querySelectorAll('.toggle-row');
    const table = document.getElementById('myTable');

    function updateColumns() {
      checkboxesCol.forEach(cb => {
        const colIndex = parseInt(cb.getAttribute('data-col'), 10);
        const display = cb.checked ? '' : 'none';

         Скрываем/показываем ячейки в каждой строке для нужного столбца
        table.querySelectorAll('tr').forEach(row => {
          const cells = row.children;
          if(cells.length >= colIndex) {
            cells[colIndex - 1].style.display = display;
          }
        });
      });
    }

    function updateRows() {
      checkboxesRow.forEach(cb => {
        const rowNum = cb.getAttribute('data-row');
        const display = cb.checked ? '' : 'none';
        const row = table.querySelector('tbody tr[data-row="' + rowNum + '"]');
        if (row) row.style.display = display;
      });
    }

     Навесить обработчики событий на чекбоксы
    checkboxesCol.forEach(cb => cb.addEventListener('change', () => {
      updateColumns();
    }));

    checkboxesRow.forEach(cb => cb.addEventListener('change', () => {
      updateRows();
    }));

     Инициализация видимости
    updateColumns();
    updateRows();
  });
</script>