Uni/WME
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Create dropdown from csv file

Browse source
This commit is contained in:
hodasemi 2018-11-02 09:58:02 +01:00
parent 57312cbf29
commit e49fde0d9c
3 changed files with 34 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
css/dropdown.css
View file

@ -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 {

32
index.html
View file

@ -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>
<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>
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>
<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>

31
js/table.js
View file

@ -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) {