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

Fixup table rendering

Browse source
This commit is contained in:
hodasemi 2018-11-15 16:53:57 +01:00
parent 65c3f0cacc
commit ff604645b1
4 changed files with 63 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
aufgabe2/css/main.css
View file

@ -148,11 +148,11 @@ h1 {
margin-bottom: 15px;
vertical-align: middle;
width: 100%;
overflow-x: scroll;
overflow: hidden;
}
.world_table {
width: 100%
width: 100%;
}
.world_table tr:nth-child(odd) {
@ -162,6 +162,7 @@ h1 {
.world_table th {
background-color: #fff;
white-space: nowrap; /* kein umbruch bei schmaler ansicht */
padding-right: 1em;
}
.world_table th:hover {
@ -173,12 +174,15 @@ h1 {
color: lightgreen;
}
.world_table th td {
.world_table td {
line-height: 1em;
padding: 11px 0;
font-size: 14px; /* same as section */
white-space: nowrap;
padding-right: 1em;
}
/*
@media only screen and (max-width: 700px) {
.world_table>tbody>tr>td,
.world_table>tbody>tr>th,
@ -191,8 +195,8 @@ h1 {
display: none;
}
}
*/
/*
@media only screen and (max-width: 1200px) {
.world_table th:nth-child(n+7), .world_table td:nth-child(n+7) {
display: none;
@ -208,7 +212,6 @@ h1 {
display: none;
}
}
*/
.boxed {
border: 1px solid green;

2
aufgabe2/index.php
View file

@ -72,7 +72,7 @@ error_reporting(E_ALL);
</section>
<div class="page">
<div id="footer_div" class="page">
<footer class="footer">
<div class="foo-left">
<p>Copyright © 2018 world_data</p>

88
aufgabe2/js/table.js
View file

@ -43,55 +43,59 @@ function rerequestFile(path, columns) {
}
function processData(csv, path) {
var columnAmount = 7;
var table = "";
var checkbox = "";
let table = document.getElementById('t01');
// split rows
var allTextLines = csv.split(/\r\n|\n/);
if (table) {
var columnAmount = 7;
var table_content = "";
var checkbox = "";
// create table header
table += "<thead><tr>";
checkbox += "<ul>";
// split rows
var allTextLines = csv.split(/\r\n|\n/);
var data = allTextLines[0].split(",");
// create table header
table_content += "<thead><tr>";
checkbox += "<ul>";
for (var j = 0; j < columnAmount; j++) {
// create table column header
table += "<th onclick=\"sortTable(" + j + ")\" >";
table += stringPerToSlash(data[j]);
table += ' <i class="fas fa-chevron-up"></i>&nbsp;<i class="fas fa-chevron-down"></i>';
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></thead><tbody>";
// create table content
for (var i = 1; i < allTextLines.length; i++) {
var data = allTextLines[i].split(',');
table += "<tr>";
var data = allTextLines[0].split(",");
for (var j = 0; j < columnAmount; j++) {
table += "<td>";
table += data[j];
table += "</td>";
// create table column header
table_content += "<th onclick=\"sortTable(" + j + ")\" >";
table_content += stringPerToSlash(data[j]);
table_content += ' <i class="fas fa-chevron-up"></i>&nbsp;<i class="fas fa-chevron-down"></i>';
table_content += "</th>";
// create dropdown elements
checkbox += "<li>";
checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
checkbox += data[j];
checkbox += "</li>";
}
table += "</tr>";
checkbox += "</ul>";
table_content += "</tr></thead><tbody>";
// create table content
for (var i = 1; i < allTextLines.length; i++) {
var data = allTextLines[i].split(',');
table_content += "<tr>";
for (var j = 0; j < columnAmount; j++) {
table_content += "<td>";
table_content += data[j];
table_content += "</td>";
}
table_content += "</tr>";
}
table_content += "</tbody>";
table.innerHTML = table_content;
document.getElementById('options').innerHTML = checkbox;
}
table += "</tbody>";
document.getElementById('t01').innerHTML = table;
document.getElementById('options').innerHTML = checkbox;
}
function toggleColumn(file) {
@ -209,7 +213,7 @@ function sortTable(n) {
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
if (dir == "asc") {
// check if the first element is a number, then assume the
// 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) {
@ -225,7 +229,7 @@ function sortTable(n) {
}
}
} else if (dir == "desc") {
// check if the first element is a number, then assume the
// 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) {

12
aufgabe2/resources/world_data_sheet.xslt
View file

@ -25,14 +25,14 @@
<thead>
<tr>
<th onclick="sortTable(0)">
id
id
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(1)">
name
name
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-down"></i>
</th>
<th onclick="sortTable(2)">
birth rate / 1000
@ -59,6 +59,7 @@
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
<!--
<th onclick="sortTable(7)">
gdp / capita growth
<i class="fas fa-chevron-up"></i>
@ -94,6 +95,7 @@
<i class="fas fa-chevron-up"></i>
<i class="fas fa-chevron-down"></i>
</th>
-->
</tr>
</thead>
<tbody>
@ -106,6 +108,7 @@
<td><xsl:value-of select="children_per_woman"/></td>
<td><xsl:value-of select="electricity_consumption_per_capita"/></td>
<td><xsl:value-of select="gdp_per_capita"/></td>
<!--
<td><xsl:value-of select="gdp__per__capita__growth"/></td>
<td><xsl:value-of select="inflation_annual"/></td>
<td><xsl:value-of select="internet_user_per_100"/></td>
@ -113,6 +116,7 @@
<td><xsl:value-of select="military_expenditure_percent_of_gdp"/></td>
<td><xsl:value-of select="gps_lat"/></td>
<td><xsl:value-of select="gps_long"/></td>
-->
</tr>
</xsl:for-each>
</tbody>