Fix sort for numbers and rework options
This commit is contained in:
parent
f6e192ba76
commit
51d0054c82
|
|
@ -1,56 +0,0 @@
|
|||
/*
|
||||
Source: https://stackoverflow.com/questions/19206919/how-to-create-checkbox-inside-dropdown
|
||||
*/
|
||||
|
||||
.dropdown-check-list {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.dropdown-check-list .anchor {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 5px 50px 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.dropdown-check-list .anchor:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-left: 2px solid black;
|
||||
border-top: 2px solid black;
|
||||
padding: 5px;
|
||||
right: 10px;
|
||||
top: 20%;
|
||||
-moz-transform: rotate(-135deg);
|
||||
-ms-transform: rotate(-135deg);
|
||||
-o-transform: rotate(-135deg);
|
||||
-webkit-transform: rotate(-135deg);
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
.dropdown-check-list .anchor:active:after {
|
||||
right: 8px;
|
||||
top: 21%;
|
||||
}
|
||||
|
||||
.dropdown-check-list ul.items {
|
||||
padding: 2px;
|
||||
display: none;
|
||||
margin: 0;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.dropdown-check-list ul.items li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown-check-list.visible .anchor {
|
||||
color: #0094ff;
|
||||
}
|
||||
|
||||
.dropdown-check-list.visible .items {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -144,6 +144,8 @@ th {
|
|||
|
||||
.Div {
|
||||
display: none;
|
||||
border: 2px solid lightgreen;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.footer{
|
||||
|
|
|
|||
12
index.html
12
index.html
|
|
@ -10,7 +10,6 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
|
||||
<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>
|
||||
<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"
|
||||
|
|
@ -65,11 +64,6 @@
|
|||
At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a>
|
||||
</p>
|
||||
<p class="hideOptions">Show/Hide: </p>
|
||||
<a> birth rate</a>
|
||||
<a> cellphones</a>
|
||||
<a> children / woman</a>
|
||||
<a> electrical usage</a>
|
||||
<a> internet usage</a>
|
||||
<button href="javascript:/" onClick="div_change('options')">Show Options</button>
|
||||
<div id="options" class=Div></div>
|
||||
|
||||
|
|
@ -85,11 +79,11 @@
|
|||
</div>
|
||||
<footer class="footer">
|
||||
<div class="foo-left">
|
||||
<p>Copyright © 2018 world_data</p>
|
||||
<p>First course exercise HTML, CSS and JS of the lecture Web and Multimedia Engineering</p>
|
||||
<p>Copyright © 2018 world_data</p>
|
||||
<p>First course exercise HTML, CSS and JS of the lecture Web and Multimedia Engineering</p>
|
||||
</div>
|
||||
<div class="foo-right">
|
||||
<p>This solution has been created by: <br> Team 26</p>
|
||||
<p>This solution has been created by: <br> Team 26</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
70
js/table.js
70
js/table.js
|
|
@ -39,12 +39,14 @@ function rerequestFile(path, columns) {
|
|||
|
||||
function processData(csv, path) {
|
||||
var table = "";
|
||||
var checkbox = "";
|
||||
|
||||
// split rows
|
||||
var allTextLines = csv.split(/\r\n|\n/);
|
||||
|
||||
// create table header
|
||||
table += "<tr>";
|
||||
checkbox += "<ul>";
|
||||
|
||||
var data = allTextLines[0].split(",");
|
||||
|
||||
|
|
@ -54,19 +56,17 @@ 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;
|
||||
|
||||
|
|
@ -83,6 +83,7 @@ function processData(csv, path) {
|
|||
checkbox += "</ul></div>";
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// create table content
|
||||
for (var i = 1; i < allTextLines.length; i++) {
|
||||
|
|
@ -104,9 +105,11 @@ function processData(csv, path) {
|
|||
}
|
||||
|
||||
function toggleColumn(file) {
|
||||
var inner_div = document.getElementById('options').childNodes;
|
||||
var activated_columns = [];
|
||||
|
||||
/*
|
||||
var inner_div = document.getElementById('options').childNodes;
|
||||
|
||||
for (i = 0; i < inner_div.length; i++) {
|
||||
var list = inner_div[i].children[0].childNodes;
|
||||
|
||||
|
|
@ -118,6 +121,18 @@ function toggleColumn(file) {
|
|||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
var list_elements = document.getElementById('options').children[0].childNodes;
|
||||
|
||||
for (i = 0; i < list_elements.length; i++) {
|
||||
var element = list_elements[i];
|
||||
var checkbox = element.children[0];
|
||||
|
||||
if (checkbox.checked) {
|
||||
activated_columns.push(checkbox.id);
|
||||
}
|
||||
}
|
||||
|
||||
rerequestFile(file, activated_columns);
|
||||
}
|
||||
|
|
@ -195,19 +210,42 @@ function sortTable(n) {
|
|||
x = rows[i].getElementsByTagName("td")[n];
|
||||
y = rows[i + 1].getElementsByTagName("td")[n];
|
||||
|
||||
var first_element = x.innerHTML.toLowerCase();
|
||||
var second_element = y.innerHTML.toLowerCase();
|
||||
|
||||
/* Check if the two rows should switch place,
|
||||
based on the direction, asc or desc: */
|
||||
if (dir == "asc") {
|
||||
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
|
||||
// If so, mark as a switch and break the loop:
|
||||
shouldSwitch = true;
|
||||
break;
|
||||
// check if the first element is a number, then assume the
|
||||
// second element is also a number
|
||||
if (isNaN(first_element)) {
|
||||
if (first_element > second_element) {
|
||||
// If so, mark as a switch and break the loop:
|
||||
shouldSwitch = true;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (parseFloat(first_element) > parseFloat(second_element)) {
|
||||
// If so, mark as a switch and break the loop:
|
||||
shouldSwitch = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (dir == "desc") {
|
||||
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
|
||||
// If so, mark as a switch and break the loop:
|
||||
shouldSwitch = true;
|
||||
break;
|
||||
// check if the first element is a number, then assume the
|
||||
// second element is also a number
|
||||
if (isNaN(first_element)) {
|
||||
if (first_element < second_element) {
|
||||
// If so, mark as a switch and break the loop:
|
||||
shouldSwitch = true;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
if (parseFloat(first_element) < parseFloat(second_element)) {
|
||||
// If so, mark as a switch and break the loop:
|
||||
shouldSwitch = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -232,7 +270,7 @@ 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';
|
||||
document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none') ? 'inline-block' : 'none';
|
||||
document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none') ? 'inline-block' : 'none';
|
||||
document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none') ? 'inline-block' : 'none';
|
||||
}
|
||||
Loading…
Reference in a new issue