Изменения документа Sandbox Test Page 3

Сводка

• Свойства страницы (1 изменено, 0 добавлено, 0 удалено)

Подробности

Свойства страницы

Содержимое

...	...	@@ -1,5 +1,77 @@
1		-Click on **"Edit"** and modify the contents of this page, then click on **"Save & View"** to see how they look like on your page!
	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>
2	2
3		-= Here's some dummy text to show you what the page looks like =
	7	+<br><br>
4	4
5		-Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	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>
	77	+