Redesign column selection

css/main.css

@@ -3,17 +3,13 @@
     background: linear-gradient(to bottom, lightgrey, white);
     overflow: hidden;
     border: 1px solid lightgrey;
-
 }
 
-
-
 .topnav ul {
     display: flex;
     flex-direction: row;
     align-items: flex-end;
     justify-content: flex-start;
-
 }
 .topnav li {
     margin: 5px;
@@ -22,7 +18,6 @@
 .pic{
     display: block;
     height: 75px;
-
 }
 
 .pic:hover {
@@ -71,8 +66,6 @@ h1 {
     font-family: 'Roboto', sans-serif;
     font-size: 26px;
     margin: 10px;
-
-
 }
 
 .text {
@@ -111,7 +104,6 @@ table#t01 tr:nth-child(even) {
 table#t01 tr:nth-child(odd) {
     background-color: lightgrey;
     height: 2em;
-
 }
 
 table#t01 th {
@@ -135,10 +127,10 @@ th {
 	border: 1px solid;
 	float: left;
     padding: 2em;
+    min-height: 150px;
+    min-width: 250px;
 }
 
-.didi {
+.Div {
-	border: 5px solid green;
+    display: none;
-	float: left;
-	padding: 2em;
 }

index.html

@@ -65,9 +65,8 @@
             At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a>
         </p>
 
-        <!-- <div id="list1" class="dropdown-check-list" tabindex="100"> </div> -->
+        <button href="javascript:/" onClick="div_change('options')">Show Options</button>
-        <ul id="list1"></ul>
+        <div id="options" class=Div></div>
-        <p id="debug"></p>
         <table id="t01"></table>
 
         <script>
@@ -76,22 +75,6 @@
         </script>
 
     </div>
-    <div class="did">
-        <h2>Listenüberschrift</h2>
-        <ul>
-            <li>Listenpunkt 1</li>
-            <li>Listenpunkt 2</li>
-            <li>Listenpunkt 3</li>
-        </ul>
-    </div>
-    <div class="didi">
-        <h2>Listenüberschrift</h2>
-        <ul>
-            <li>Listenpunkt 1</li>
-            <li>Listenpunkt 2</li>
-            <li>Listenpunkt 3</li>
-        </ul>
-    </div>
     <footer>
         <hr style="border: 1px solid lightgreen">
         <p>Copyright © 2018 world_data</p>

js/table.js

@@ -39,7 +39,6 @@ function rerequestFile(path, columns) {
 
 function processData(csv, path) {
     var table = "";
-    var checkbox = "";
 
     // split rows
     var allTextLines = csv.split(/\r\n|\n/);
@@ -55,16 +54,36 @@ function processData(csv, path) {
         table += data[j];
         table += "</th>";
 
+        /*
         // create dropdown elements
         checkbox += "<li>";
         checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
         checkbox += data[j];
         checkbox += "</li>";
+        */
     }
 
-    // checkbox += "</ul>";
     table += "</tr>";
 
+    var checkbox = "";
+
+    for (var j = 0; j < data.length; j++) {
+        var test = j % 3;
+
+        if (test == 0) {
+            checkbox += "<div class='did'><ul>";
+        }
+
+        checkbox += "<li>";
+        checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
+        checkbox += data[j];
+        checkbox += "</li>";
+
+        if (test == 2) {
+            checkbox += "</ul></div>";
+        }
+    }
+
     // create table content
     for (var i = 1; i < allTextLines.length; i++) {
         var data = allTextLines[i].split(',');
@@ -81,18 +100,22 @@ function processData(csv, path) {
     }
 
     document.getElementById('t01').innerHTML = table;
-    document.getElementById('list1').innerHTML = checkbox;
+    document.getElementById('options').innerHTML = checkbox;
 }
 
 function toggleColumn(file) {
-    var iterator = document.getElementById('list1').childNodes;
+    var inner_div = document.getElementById('options').childNodes;
     var activated_columns = [];
 
-    for (i = 0; i < iterator.length; i++) {
+    for (i = 0; i < inner_div.length; i++) {
-        var checkbox = iterator[i].children[0];
+        var list = inner_div[i].children[0].childNodes;
 
-        if (checkbox.checked) {
+        for (j = 0; j < list.length; j++) {
-            activated_columns.push(checkbox.id);
+            var checkbox = list[j].children[0];
+
+            if (checkbox.checked) {
+                activated_columns.push(checkbox.id);
+            }
         }
     }
 
@@ -207,3 +230,9 @@ function sortTable(n) {
         }
     }
 }
+
+function div_change(strID) {
+    document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none') ? 'block' : 'none';
+    document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'block' : 'none';
+    document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none') ? 'block' : 'none';
+}