Redesign column selection
This commit is contained in:
parent
23d613ba0f
commit
938d70abb9
16
css/main.css
16
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 {
|
||||
border: 5px solid green;
|
||||
float: left;
|
||||
padding: 2em;
|
||||
.Div {
|
||||
display: none;
|
||||
}
|
||||
21
index.html
21
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> -->
|
||||
<ul id="list1"></ul>
|
||||
<p id="debug"></p>
|
||||
<button href="javascript:/" onClick="div_change('options')">Show Options</button>
|
||||
<div id="options" class=Div></div>
|
||||
<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>
|
||||
|
|
|
|||
45
js/table.js
45
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++) {
|
||||
var checkbox = iterator[i].children[0];
|
||||
for (i = 0; i < inner_div.length; i++) {
|
||||
var list = inner_div[i].children[0].childNodes;
|
||||
|
||||
if (checkbox.checked) {
|
||||
activated_columns.push(checkbox.id);
|
||||
for (j = 0; j < list.length; j++) {
|
||||
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';
|
||||
}
|
||||
Loading…
Reference in a new issue