bazooka07/del-column.php

## del-column.php
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Hit a cross for hidding a column or a row</title>
    <!-- See at https://forum.alsacreations.com/topic-5-83353-1.html -->
    <!-- Play at https://codepen.io/bazooka07/pen/pKJaQa -->
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style>
		body { font-family: 'Noto Sans', Ubuntu, Arial; background: #666; }
		table { border-collapse: collapse; border: 1px solid #444; background: #fff; }
		tr:nth-of-type(2n) { background: #eee; }
		th:hover { background: red; }
		tr:hover { background: #444; color: #fff; }
		th { cursor: pointer; }
		td, th { text-align: center; padding: 0.3rem 0.5rem; }
		td { border-left: 1px solid #444; }
		.hide { display: none; }
	</style>
</head><body>
	<table id="id1">
		<tr>
			<th>&nbsp;</th>
<?php
$rMax = 11;
$cMax = 13;
for($col=1; $col<$cMax; $col++) {
	echo <<< CELL
			<th class="col">X</th>\n
CELL;
}
for($row=1; $row<$rMax; $row++) {
	echo <<< ROW_START
		</tr><tr>
			<th class="row">X</th>\n
ROW_START;
	for($col=1; $col<$cMax; $col++) {
		echo <<< CELL
			<td>L{$row} : C{$col}</td>\n
CELL;
	}
}
?>
		</tr>
	</table>
	<div id="toolbar">
		<button data-css="tr.hide">All rows</button>
		<button data-css="td.hide, th.hide">All cols</button>
	</div>
	<script>
		'use strict';

		// Rows and cells for hidding
		const table1 = document.getElementById('id1');
		table1.addEventListener('click', function(event) {
			if(event.target.classList.contains('col')) {
				const cellIndex = event.target.cellIndex;
				alert('the column #' + cellIndex + ' is hidding');
				const rows = table1.rows;
				for(var i=0, iMax=rows.length; i<iMax; i++) {
					rows[i].cells[cellIndex].classList.add('hide');
				}
			} else if(event.target.classList.contains('row')) {
				const row = event.target.parentElement;
				alert('the row #' + row.rowIndex + ' is hidding');
				row.classList.add('hide');
			} else {
				alert('Pas là, malheureux!');
				return;
			}
			event.preventDefault();
		});

		// Buttons
		document.getElementById('toolbar').addEventListener('click', function(event) {
			if(event.target.hasAttribute('data-css')) {
				const els = table1.querySelectorAll(event.target.getAttribute('data-css'));
				if(els != null) {
					for(var i=0, iMax=els.length; i<iMax; i++) {
						els[i].classList.remove('hide');
					}
				}
			}
		});
	</script>
</body></html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Hit a cross for hidding a column or a row</title>
	<!-- See at https://forum.alsacreations.com/topic-5-83353-1.html -->
	<!-- Play at https://codepen.io/bazooka07/pen/pKJaQa -->
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<style>
	body { font-family: 'Noto Sans', Ubuntu, Arial; background: #666; }
	table { border-collapse: collapse; border: 1px solid #444; background: #fff; }
	tr:nth-of-type(2n) { background: #eee; }
	th:hover { background: red; }
	tr:hover { background: #444; color: #fff; }
	th { cursor: pointer; }
	td, th { text-align: center; padding: 0.3rem 0.5rem; }
	td { border-left: 1px solid #444; }
	.hide { display: none; }
	</style>
	</head><body>
	<table id="id1">
	<tr>
	<th> </th>
	<?php
	$rMax = 11;
	$cMax = 13;
	for($col=1; $col<$cMax; $col++) {
	echo <<< CELL
	<th class="col">X</th>\n
	CELL;
	}
	for($row=1; $row<$rMax; $row++) {
	echo <<< ROW_START
	</tr><tr>
	<th class="row">X</th>\n
	ROW_START;
	for($col=1; $col<$cMax; $col++) {
	echo <<< CELL
	<td>L{$row} : C{$col}</td>\n
	CELL;
	}
	}
	?>
	</tr>
	</table>
	<div id="toolbar">
	<button data-css="tr.hide">All rows</button>
	<button data-css="td.hide, th.hide">All cols</button>
	</div>
	<script>
	'use strict';

	// Rows and cells for hidding
	const table1 = document.getElementById('id1');
	table1.addEventListener('click', function(event) {
	if(event.target.classList.contains('col')) {
	const cellIndex = event.target.cellIndex;
	alert('the column #' + cellIndex + ' is hidding');
	const rows = table1.rows;
	for(var i=0, iMax=rows.length; i<iMax; i++) {
	rows[i].cells[cellIndex].classList.add('hide');
	}
	} else if(event.target.classList.contains('row')) {
	const row = event.target.parentElement;
	alert('the row #' + row.rowIndex + ' is hidding');
	row.classList.add('hide');
	} else {
	alert('Pas là, malheureux!');
	return;
	}
	event.preventDefault();
	});

	// Buttons
	document.getElementById('toolbar').addEventListener('click', function(event) {
	if(event.target.hasAttribute('data-css')) {
	const els = table1.querySelectorAll(event.target.getAttribute('data-css'));
	if(els != null) {
	for(var i=0, iMax=els.length; i<iMax; i++) {
	els[i].classList.remove('hide');
	}
	}
	}
	});
	</script>
	</body></html>