5.- PERPLEXITY. Create a table that can be sorted by columns.
We ask for it:
I have the string = "Fernando,33,Granada,04\nAntonio,66,Sevilla,03\nLuis,55,Cádiz,02\nCarlos,44,Córdoba,01\nRicardo,77,Huelva,05", I want to display it in a table built with HTML, JavaScript and CSS. By clicking on the header of each column, SortUp and SortDown must be ordered. Row colors should alternate between light red and light green, even when sorted. Cells must have a black border. Show the code.
I ask the question in Spanish, as I have shown in the previous image.
I get:
tablacss_orden.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabla ordenable</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
cursor: pointer;
border: 1px solid black;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #c8f7c5;
}
tr:nth-child(odd) {
background-color: #f7c5c5;
}
.headerSortUp:after,
.headerSortDown:after {
content: ' ';
position: relative;
left: 5px;
}
.headerSortUp:after {
border-bottom: 8px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.headerSortDown:after {
border-top: 8px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
</style>
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
// Add CSS classes to indicate sorting direction
var th = table.getElementsByTagName("TH");
for (i = 0; i < th.length; i++) {
th[i].classList.remove("headerSortUp");
th[i].classList.remove("headerSortDown");
}
if (dir == "asc") {
th[n].classList.add("headerSortUp");
} else if (dir == "desc") {
th[n].classList.add("headerSortDown");
}
// Alternate row colors
var rows = table.getElementsByTagName("TR");
for (i = 0; i < rows.length; i++) {
var color = i % 2 == 0 ? "#f7c5c5" : "#c8f7c5";
rows[i].style.backgroundColor = color;
}
}
function createTable(data) {
var rows = data.split("\n");
var table = "<table id='myTable'>";
table += "<thead><tr>";
table += "<th onclick='sortTable(0)'>Nombre</th>";
table += "<th onclick='sortTable(1)'>Edad</th>";
table += "<th onclick='sortTable(2)'>Ciudad</th>";
table += "<th onclick='sortTable(3)'>Código postal</th>";
table += "</tr></thead>";
table += "<tbody>";
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
var color = i % 2 == 0 ? "#f7c5c5" : "#c8f7c5";
table += "<tr style='background-color: " + color + "'>";
for (var j = 0; j < cells.length; j++) {
table += "<td>" + cells[j] + "</td>";
}
table += "</tr>";
}
table += "</tbody></table>";
return table;
}
window.onload = function() {
var data = "Fernando,33,Granada,04\nAntonio,66,Sevilla,03\nLuis,55,Cádiz,02\nCarlos,44,Córdoba,01\nRicardo,77,Huelva,05";
var table = createTable(data);
document.getElementById("tableContainer").innerHTML = table;
};
</script>
</head>
<body>
<div id="tableContainer"></div>
</body>
</html>
http://kio4.com/appinventor/javascript/tablacss_orden.htm
- I adapt it to App Inventor by changing:
window.onload = function() {
// var data = "Fernando,33,Granada,04\nAntonio,66,Sevilla,03\nLuis,55,Cádiz,02\nCarlos,44,Córdoba,01\nRicardo,77,Huelva,05";
var data = window.AppInventor.getWebViewString(); // INPUT
p170F_JavaScriptTablaCSS_v3.aia (7.0 KB)
