Перейти к содержимому

Исходный код вики Sandbox Test Page 3

Редактировал(а) Руслан Савельев 2025/06/04 06:16
Последние авторы
1 <!-- Чекбоксы управления -->
2 <label><input type="checkbox" class="toggle-col" data-col="2" checked> Показать столбец 2</label>
3 <label><input type="checkbox" class="toggle-col" data-col="3" checked> Показать столбец 3</label>
4 <label><input type="checkbox" class="toggle-row" data-row="2" checked> Показать строку 2</label>
5 <label><input type="checkbox" class="toggle-row" data-row="3" checked> Показать строку 3</label>
6
7 <br><br>
8
9 <!-- Таблица -->
10 <table id="myTable" border="1">
11 <thead>
12 <tr>
13 <th>Колонка 1</th>
14 <th>Колонка 2</th>
15 <th>Колонка 3</th>
16 </tr>
17 </thead>
18 <tbody>
19 <tr data-row="1">
20 <td>1-1</td><td>1-2</td><td>1-3</td>
21 </tr>
22 <tr data-row="2">
23 <td>2-1</td><td>2-2</td><td>2-3</td>
24 </tr>
25 <tr data-row="3">
26 <td>3-1</td><td>3-2</td><td>3-3</td>
27 </tr>
28 </tbody>
29 </table>
30
31 <script>
32 // При загрузке страницы
33 document.addEventListener('DOMContentLoaded', function() {
34 const checkboxesCol = document.querySelectorAll('.toggle-col');
35 const checkboxesRow = document.querySelectorAll('.toggle-row');
36 const table = document.getElementById('myTable');
37
38 function updateColumns() {
39 checkboxesCol.forEach(cb => {
40 const colIndex = parseInt(cb.getAttribute('data-col'), 10);
41 const display = cb.checked ? '' : 'none';
42
43 // Скрываем/показываем ячейки в каждой строке для нужного столбца
44 table.querySelectorAll('tr').forEach(row => {
45 const cells = row.children;
46 if(cells.length >= colIndex) {
47 cells[colIndex - 1].style.display = display;
48 }
49 });
50 });
51 }
52
53 function updateRows() {
54 checkboxesRow.forEach(cb => {
55 const rowNum = cb.getAttribute('data-row');
56 const display = cb.checked ? '' : 'none';
57 const row = table.querySelector('tbody tr[data-row="' + rowNum + '"]');
58 if (row) row.style.display = display;
59 });
60 }
61
62 // Навесить обработчики событий на чекбоксы
63 checkboxesCol.forEach(cb => cb.addEventListener('change', () => {
64 updateColumns();
65 }));
66
67 checkboxesRow.forEach(cb => cb.addEventListener('change', () => {
68 updateRows();
69 }));
70
71 // Инициализация видимости
72 updateColumns();
73 updateRows();
74 });
75 </script>