Исходный код вики Sandbox Test Page 3
Версия 5.1 от Руслан Савельев на 2025/06/04 10:15
Скрыть последних авторов
| author | version | line-number | content |
|---|---|---|---|
 |
5.1 | 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> | ||
| |
1.1 | 6 | |
| |
5.1 | 7 | <br><br> |
| |
1.1 | 8 | |
| |
4.1 | 9 | <!-- Таблица --> |
| |
5.1 | 10 | <table id="myTable" border="1"> |
| |
4.1 | 11 | <thead> |
| 12 | <tr> | ||
| |
5.1 | 13 | <th>Колонка 1</th> |
| 14 | <th>Колонка 2</th> | ||
| 15 | <th>Колонка 3</th> | ||
| |
4.1 | 16 | </tr> |
| 17 | </thead> | ||
| 18 | <tbody> | ||
| |
5.1 | 19 | <tr data-row="1"> |
| 20 | <td>1-1</td><td>1-2</td><td>1-3</td> | ||
| |
4.1 | 21 | </tr> |
| |
5.1 | 22 | <tr data-row="2"> |
| 23 | <td>2-1</td><td>2-2</td><td>2-3</td> | ||
| |
4.1 | 24 | </tr> |
| |
5.1 | 25 | <tr data-row="3"> |
| 26 | <td>3-1</td><td>3-2</td><td>3-3</td> | ||
| 27 | </tr> | ||
| |
4.1 | 28 | </tbody> |
| 29 | </table> | ||
| |
2.1 | 30 | |
| 31 | |||
| |
5.1 | 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'); | ||
| |
2.1 | 38 | |
| |
5.1 | 39 | function updateColumns() { |
| 40 | checkboxesCol.forEach(cb => { | ||
| 41 | const colIndex = parseInt(cb.getAttribute('data-col'), 10); | ||
| 42 | const display = cb.checked ? '' : 'none'; | ||
| |
2.1 | 43 | |
| |
5.1 | 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 | } | ||
| |
2.1 | 53 | |
| |
5.1 | 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 | } | ||
| |
2.1 | 62 | |
| |
5.1 | 63 | // Навесить обработчики событий на чекбоксы |
| 64 | checkboxesCol.forEach(cb => cb.addEventListener('change', () => { | ||
| 65 | updateColumns(); | ||
| 66 | })); | ||
| |
2.1 | 67 | |
| |
5.1 | 68 | checkboxesRow.forEach(cb => cb.addEventListener('change', () => { |
| 69 | updateRows(); | ||
| 70 | })); | ||
| |
2.1 | 71 | |
| |
5.1 | 72 | // Инициализация видимости |
| 73 | updateColumns(); | ||
| 74 | updateRows(); | ||
| 75 | }); | ||
| 76 | </script> | ||
| |
2.1 | 77 |