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

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

Версия 5.1 от Руслан Савельев на 2025/06/04 10:15
Последние авторы
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
32 <script>
33 // При загрузке страницы
34 document.addEventListener('DOMContentLoaded', function() {
35 const checkboxesCol = document.querySelectorAll('.toggle-col');
36 const checkboxesRow = document.querySelectorAll('.toggle-row');
37 const table = document.getElementById('myTable');
38
39 function updateColumns() {
40 checkboxesCol.forEach(cb => {
41 const colIndex = parseInt(cb.getAttribute('data-col'), 10);
42 const display = cb.checked ? '' : 'none';
43
44 // Скрываем/показываем ячейки в каждой строке для нужного столбца
45 table.querySelectorAll('tr').forEach(row => {
46 const cells = row.children;
47 if(cells.length >= colIndex) {
48 cells[colIndex - 1].style.display = display;
49 }
50 });
51 });
52 }
53
54 function updateRows() {
55 checkboxesRow.forEach(cb => {
56 const rowNum = cb.getAttribute('data-row');
57 const display = cb.checked ? '' : 'none';
58 const row = table.querySelector('tbody tr[data-row="' + rowNum + '"]');
59 if (row) row.style.display = display;
60 });
61 }
62
63 // Навесить обработчики событий на чекбоксы
64 checkboxesCol.forEach(cb => cb.addEventListener('change', () => {
65 updateColumns();
66 }));
67
68 checkboxesRow.forEach(cb => cb.addEventListener('change', () => {
69 updateRows();
70 }));
71
72 // Инициализация видимости
73 updateColumns();
74 updateRows();
75 });
76 </script>