Create dropdown from csv file

css/dropdown.css

@@ -4,6 +4,7 @@ Source: https://stackoverflow.com/questions/19206919/how-to-create-checkbox-insi
 
 .dropdown-check-list {
     display: inline-block;
+    padding: 5px;
 }
 
 .dropdown-check-list .anchor {

index.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="css/dropdown.css" />
     <script src="js/table.js"></script>
+    <script src="js/checkbox.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
         crossorigin="anonymous">
@@ -62,40 +63,15 @@
             sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.
             Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.
 
-            At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a></p>
+            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">
-            <span class="anchor">Select Columns</span>
-            <ul class="items">
-                <li><input type="checkbox" />Apple </li>
-                <li><input type="checkbox" />Orange</li>
-                <li><input type="checkbox" />Grapes </li>
-                <li><input type="checkbox" />Berry </li>
-                <li><input type="checkbox" />Mango </li>
-                <li><input type="checkbox" />Banana </li>
-                <li><input type="checkbox" />Tomato</li>
-            </ul>
-        </div>
 
+        <div id="list1" class="dropdown-check-list" tabindex="100"> </div>
         <table id="t01"></table>
 
         <script>
             // create table
             handleFile()            
-
-            // create callbacks for checkboxes
-            var checkList = document.getElementById('list1');
-            checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
-                if (checkList.classList.contains('visible'))
-                    checkList.classList.remove('visible');
-                else
-                    checkList.classList.add('visible');
-            }
-
-            checkList.onblur = function (evt) {
-                checkList.classList.remove('visible');
-            }
         </script>
 
     </div>

js/table.js

@@ -22,7 +22,8 @@ function handleFile() {
 }
 
 function processData(csv) {
-    var table = "<table style='width:100%'>";
+    var table = "";
+    var checkbox = "";
 
     // split rows
     var allTextLines = csv.split(/\r\n|\n/);
@@ -30,14 +31,26 @@ function processData(csv) {
     // create table header
     table += "<tr>";
 
+    // create checkbox content
+    checkbox += "<span class='anchor'>Select Columns</span>";
+    checkbox += "<ul class='items'>";
+
     var data = allTextLines[0].split(",");
 
     for (var j = 0; j < data.length; j++) {
+        // create table column header
         table += "<th onclick=\"sortTable(" + j + ")\" >";
         table += data[j];
         table += "</th>";
+
+        // create dropdown elements
+        checkbox += "<li>";
+        checkbox += "<input id=checkbox_" + data[j] + " type='checkbox' checked='checked' />";
+        checkbox += data[j];
+        checkbox += "</li>";
     }
 
+    checkbox += "</ul>";
     table += "</tr>";
 
     // create table content
@@ -55,9 +68,21 @@ function processData(csv) {
         table += "</tr>";
     }
 
-    table += "</table>";
-
     document.getElementById('t01').innerHTML = table;
+    document.getElementById('list1').innerHTML = checkbox;
+
+    // create callbacks for checkboxes
+    var checkList = document.getElementById('list1');
+    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
+        if (!checkList.classList.contains('visible'))
+            checkList.classList.remove('visible');
+        else
+            checkList.classList.add('visible');
+    }
+
+    checkList.onblur = function (evt) {
+        checkList.classList.remove('visible');
+    }
 }
 
 function sortTable(n) {