create toggle buttons automatically for columns

band-plan.html

@@ -13,6 +13,9 @@
 body>div {
 	padding-bottom: 1em;
 }
+div#togglebuttons>button {
+	margin: 0 0.1em;
+}
 </style>
 </head>
 
@@ -107,9 +110,17 @@ body>div {
 						table.download("pdf", path.basename(document.getElementById('sel_plan').value, '.yml') + '.pdf', {}, download_range);
 					});
 					//["band", "frequency", "bandwidth", "mode", "description"].forEach((col) => {
-					table.getColumns().forEach((col) => {
+					table.on("tableBuilt", () => {
-						document.getElementById("toggle-" + col).addEventListener("click", () => {
+						var div_togglebuttons = document.getElementById("togglebuttons");
-							table.toggleColumn(col);
+						div_togglebuttons.innerHTML = "<span>Toggle column:</span>";
+						table.getColumns().forEach((col) => {
+							let col_name = col.getField();
+							let b = document.createElement("button");
+							b.innerText = col_name;
+							b.addEventListener("click", () => {
+								table.toggleColumn(col_name);
+							});
+							div_togglebuttons.appendChild(b);
 						});
 					});
 					document.getElementById("error").innerText = "";
@@ -122,20 +133,14 @@ body>div {
 	</script>
 	<div>
 		<form name="selection">
-			<label>plan:
+			<label>Plan:
 				<input name="plan" id="sel_plan" type="text" value="/plan-de.yml">
 			</label>
 			<button onclick="update_plan()">Change plan</button>
 			<button id="print">Print plan</button>
 		</form>
 	</div>
-	<div>
+	<div id="togglebuttons"></div>
-		<button id="toggle-band">Toggle band</button>
-		<button id="toggle-frequency">Toggle frequency</button>
-		<button id="toggle-bandwidth">Toggle bandwidth</button>
-		<button id="toggle-mode">Toggle mode</button>
-		<button id="toggle-description">Toggle description</button>
-	</div>
 	<div> 
 		Use filter with "!" as "not".
 	</div>