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

Редактировал(а) Руслан Савельев 2025/06/04 06:16

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
5.1	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');
2.1	37
5.1	38	function updateColumns() {
	39	checkboxesCol.forEach(cb => {
	40	const colIndex = parseInt(cb.getAttribute('data-col'), 10);
	41	const display = cb.checked ? '' : 'none';
2.1	42
5.1	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	}
2.1	52
5.1	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	}
2.1	61
5.1	62	// Навесить обработчики событий на чекбоксы
	63	checkboxesCol.forEach(cb => cb.addEventListener('change', () => {
	64	updateColumns();
	65	}));
2.1	66
5.1	67	checkboxesRow.forEach(cb => cb.addEventListener('change', () => {
	68	updateRows();
	69	}));
2.1	70
5.1	71	// Инициализация видимости
	72	updateColumns();
	73	updateRows();
	74	});
	75	</script>
2.1	76
6.1	77
	78
	79
	80
	81
	82