Fixup table rendering
This commit is contained in:
parent
65c3f0cacc
commit
ff604645b1
4 changed files with 63 additions and 52 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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> <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> <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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue