|
App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Curso de App inventor 2 en español - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
___________________________
170F.- TableView. Visor de Tabla con JavaScript.
 p170F_JavaScriptTablaCSS.aia
- Tablas mediante JavaScript.
1.- Tabla.
javascript/tablacss.htm
tablacss.htm |
<!DOCTYPE html>
<html>
<head>
<title>Table with CSS</title>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #000;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #d1f0d1;
}
tr:nth-child(odd) {
background-color: #ffdede;
}
</style>
</head>
<body>
Click on a cell.<br><br>
<div id="table-container"></div>
<script>
var string = "1,2,3,4\n5,6,7,8\n9,10,11,12\n13,14,15,16";
var rows = string.split("\n");
var table = document.createElement("table");
var headerRow = document.createElement("tr");
var headerCell1 = document.createElement("th");
var headerCell2 = document.createElement("th");
var headerCell3 = document.createElement("th");
var headerCell4 = document.createElement("th");
headerCell1.appendChild(document.createTextNode("Column 1"));
headerCell2.appendChild(document.createTextNode("Column 2"));
headerCell3.appendChild(document.createTextNode("Column 3"));
headerCell4.appendChild(document.createTextNode("Column 4"));
headerRow.appendChild(headerCell1);
headerRow.appendChild(headerCell2);
headerRow.appendChild(headerCell3);
headerRow.appendChild(headerCell4);
table.appendChild(headerRow);
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].split(",");
var row = document.createElement("tr");
if (i % 2 == 0) {
row.style.backgroundColor = "#d1f0d1";
} else {
row.style.backgroundColor = "#ffdede";
}
for (var j = 0; j < cols.length; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(cols[j]));
cell.addEventListener("click", function() {
alert(this.innerHTML);
});
row.appendChild(cell);
}
table.appendChild(row);
}
document.getElementById("table-container").appendChild(table);
</script>
</body>
</html>
|
- Cambiando estas líneas lo adaptamos a App Inventor:
tablacss.htm |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
(...)
// var string = "1,2,3,4\n5,6,7,8\n9,10,11,12\n13,14,15,16";
var string = window.AppInventor.getWebViewString(); // INPUT
(...)
// alert(rowContent);
window.AppInventor.setWebViewString(rowContent); // OUTPUT
|
2.- Mostrar una fila.
- Cuando hacemos Clic, obtenemos toda la fila.
/javascript/tablacss_row.htm
tablacss_row.htm |
<!DOCTYPE html>
<html>
<head>
<title>Table with CSS</title>
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #000;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #d1f0d1;
}
tr:nth-child(odd) {
background-color: #ffdede;
}
</style>
</head>
<body>
Click on a cell.<br><br>
<div id="table-container"></div>
<script>
var string = "1,2,3,4\n5,6,7,8\n9,10,11,12\n13,14,15,16";
var rows = string.split("\n");
var table = document.createElement("table");
var headerRow = document.createElement("tr");
var headerCell1 = document.createElement("th");
var headerCell2 = document.createElement("th");
var headerCell3 = document.createElement("th");
var headerCell4 = document.createElement("th");
headerCell1.appendChild(document.createTextNode("Column 1"));
headerCell2.appendChild(document.createTextNode("Column 2"));
headerCell3.appendChild(document.createTextNode("Column 3"));
headerCell4.appendChild(document.createTextNode("Column 4"));
headerRow.appendChild(headerCell1);
headerRow.appendChild(headerCell2);
headerRow.appendChild(headerCell3);
headerRow.appendChild(headerCell4);
table.appendChild(headerRow);
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].split(",");
var row = document.createElement("tr");
if (i % 2 == 0) {
row.style.backgroundColor = "#d1f0d1";
} else {
row.style.backgroundColor = "#ffdede";
}
for (var j = 0; j < cols.length; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(cols[j]));
row.appendChild(cell);
}
row.addEventListener("click", function() {
var rowContent = "";
for (var k = 0; k < this.cells.length; k++) {
rowContent += this.cells[k].innerHTML + "|";
}
alert(rowContent);
});
table.appendChild(row);
}
document.getElementById("table-container").appendChild(table);
</script>
</body>
</html>
|
3.- Ordena la tabla cuando pulsa en la cabecera de las columnas.
javascript/tablacss_sort.htm
tablacss_sort.htm |
<!DOCTYPE html>
<html>
<head>
<title>Tabla con CSS y ordenamiento</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #d1f0d1;
}
tr:nth-child(odd) {
background-color: #ffdede;
}
</style>
</head>
<body>
Click on a header.<br><br>
<div id="table-container"></div>
<script>
var string = "Fernando,33,Granada,4\nAntonio,66,Sevilla,3\nLuis,55,Cadiz,2\nCarlos,44,Cordoba,1";
var rows = string.split("\n");
var table = document.createElement("table");
var headerRow = document.createElement("tr");
var headerCell1 = document.createElement("th");
var headerCell2 = document.createElement("th");
var headerCell3 = document.createElement("th");
var headerCell4 = document.createElement("th");
headerCell1.appendChild(document.createTextNode("Columna 1"));
headerCell2.appendChild(document.createTextNode("Columna 2"));
headerCell3.appendChild(document.createTextNode("Columna 3"));
headerCell4.appendChild(document.createTextNode("Columna 4"));
headerCell1.addEventListener("click", function() { sortTable(0); });
headerCell2.addEventListener("click", function() { sortTable(1); });
headerCell3.addEventListener("click", function() { sortTable(2); });
headerCell4.addEventListener("click", function() { sortTable(3); });
headerRow.appendChild(headerCell1);
headerRow.appendChild(headerCell2);
headerRow.appendChild(headerCell3);
headerRow.appendChild(headerCell4);
table.appendChild(headerRow);
var data = [];
var firstRowColor = "#d1f0d1"; // color of the first row after the header
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].split(",");
data.push(cols);
var row = document.createElement("tr");
if (i === 0) {
row.style.backgroundColor = firstRowColor;
} else {
row.style.backgroundColor = i % 2 === 0 ? firstRowColor : "#ffdede";
}
for (var j = 0; j < cols.length; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(cols[j]));
row.appendChild(cell);
}
row.addEventListener("click", function() {
var rowContent = "";
for (var k = 0; k < this.cells.length; k++) {
rowContent += this.cells[k].innerHTML + "|";
}
alert(rowContent);
});
table.appendChild(row);
}
document.getElementById("table-container").appendChild(table);
function sortTable(col) {
var rows = table.rows;
var switching = true;
var shouldSwitch = false;
var i = 1;
var even = true;
while (switching) {
switching = false;
for (var j = 1; j < (rows.length - 1); j++) {
shouldSwitch = false;
var x = rows[j].getElementsByTagName("td")[col];
var y = rows[j + 1].getElementsByTagName("td")[col];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[j].parentNode.insertBefore(rows[j + 1], rows[j]);
switching = true;
}
}
// Alternate color background row.
for (var k = 1; k < rows.length; k++) {
if (k % 2 === 0) {
rows[k].style.backgroundColor = "#d1f0d1";
} else {
rows[k].style.backgroundColor = "#ffdede";
}
}
}
</script>
</body>
</html>
|
4.- Con imágenes.
p170F_JavaScriptTablaCSS_v2.aia
javascript/tablacss_sort_image.htm
tablacss_sort_image.htm |
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tabla con CSS y ordenamiento</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #d1f0d1;
}
tr:nth-child(odd) {
background-color: #ffdede;
}
</style>
</head>
<body>
Click on a header.<br><br>
<div id="table-container"></div>
<script>
// var string = "<img src='perro_50t.png'>,Perro,33,04\n
<img src='gato_50t.png'>,Gato,66,03\n<img src='pajaro_50t.png'>,
Pájaro,55,02\n<img src='cerdo_50t.png'>,Cerdo,44,01\n<img src='raton_50t.png'>,
Ratón,77,05\n<img src='elefante_50t.png'>,Elefante,22,06\n<img src='vaca_50t.png'>,
Vaca,33,07\n<img src='jirafa_50t.png'>,Jirafa,44,08\n<img src='buho_50t.png'>,Buho,
55,09\n<img src='mono_50t.png'>,Mono,66,10\n<img src='cebra_50t.png'>,Cebra,77,11";
var string = window.AppInventor.getWebViewString(); // INPUT
var rows = string.split("\n");
var table = document.createElement("table");
var headerRow = document.createElement("tr");
var headerCell1 = document.createElement("th");
var headerCell2 = document.createElement("th");
var headerCell3 = document.createElement("th");
var headerCell4 = document.createElement("th");
headerCell1.appendChild(document.createTextNode("Columna 1"));
headerCell2.appendChild(document.createTextNode("Columna 2"));
headerCell3.appendChild(document.createTextNode("Columna 3"));
headerCell4.appendChild(document.createTextNode("Columna 4"));
headerCell1.addEventListener("click", function() { sortTable(0); });
headerCell2.addEventListener("click", function() { sortTable(1); });
headerCell3.addEventListener("click", function() { sortTable(2); });
headerCell4.addEventListener("click", function() { sortTable(3); });
headerRow.appendChild(headerCell1);
headerRow.appendChild(headerCell2);
headerRow.appendChild(headerCell3);
headerRow.appendChild(headerCell4);
table.appendChild(headerRow);
var data = [];
var firstRowColor = "#d1f0d1"; // color of the first row after the header
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].split(",");
data.push(cols);
var row = document.createElement("tr");
if (i === 0) {
row.style.backgroundColor = firstRowColor;
} else {
row.style.backgroundColor = i % 2 === 0 ? firstRowColor : "#ffdede";
}
for (var j = 0; j < cols.length; j++) {
var cell = document.createElement("td");
if (cols[j].startsWith("<img")) {
cell.innerHTML = cols[0];
} else {
cell.appendChild(document.createTextNode(cols[j]));
}
row.appendChild(cell);
}
row.addEventListener("click", function() {
var rowContent = "";
for (var k = 0; k < this.cells.length; k++) {
rowContent += this.cells[k].innerHTML + "|";
}
// alert(rowContent);
window.AppInventor.setWebViewString(rowContent); // OUTPUT
});
table.appendChild(row);
}
document.getElementById("table-container").appendChild(table);
function sortTable(col) {
var rows = table.rows;
var switching = true;
var shouldSwitch = false;
var i = 1;
var even = true;
while (switching) {
switching = false;
for (var j = 1; j < (rows.length - 1); j++) {
shouldSwitch = false;
var x = rows[j].getElementsByTagName("td")[col];
var y = rows[j + 1].getElementsByTagName("td")[col];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
rows[j].parentNode.insertBefore(rows[j + 1], rows[j]);
switching = true;
}
}
// Alternate color background row.
for (var k = 1; k < rows.length; k++) {
if (k % 2 === 0) {
rows[k].style.backgroundColor = "#d1f0d1";
} else {
rows[k].style.backgroundColor = "#ffdede";
}
}
}
</script>
</body>
</html>
|
5.- Ordenadar tabla, alfabéticamente y alrevés.
p170F_JavaScriptTablaCSS_v3.aia
javascript/tablacss_orden.htm
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>
|
6.- Gráfico.
p170F_JavaScriptTablaCSS_v4.aia
javascript/grafica.htm
- Lo adaptamos a App Inventor modificando estas líneas.
grafica.htm |
// Obtener los valores de Y y X
// var yValues = "10,40,03,20,60,40,30,60,29,70";
// var xValues = "1,2,3,4,5,6,7,8,9,10";
var string = window.AppInventor.getWebViewString().split("|"); // INPUT
var yValues = string[0];
var xValues = string[1];
(...)
|
7.- Ordenadar tabla, alfabéticamente y alrevés. Click sobre una fila.
javascript/tablacss_orden_clickrow.htm
tablacss_orden_clickrow.htm |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabla con CSS y ordenamiento</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #d1f0d1;
}
tr:nth-child(odd) {
background-color: #ffdede;
}
</style>
</head>
<body>
Click on a header.<br><br>
<div id="table-container"></div>
<script>
var string = "Fernando,33,Granada,04\nAntonio,66,Sevilla,03\nLuis,55,Cádiz,02\nCarlos,44,Córdoba,01\nRicardo,77,Huelva,05";
var rows = string.split("\n");
var table = document.createElement("table");
var ascending = true;
var headerRow = document.createElement("tr");
var headerCell1 = document.createElement("th");
var headerCell2 = document.createElement("th");
var headerCell3 = document.createElement("th");
var headerCell4 = document.createElement("th");
headerCell1.appendChild(document.createTextNode("Column 1"));
headerCell2.appendChild(document.createTextNode("Column 2"));
headerCell3.appendChild(document.createTextNode("Column 3"));
headerCell4.appendChild(document.createTextNode("Column 4"));
// Agregar atributos data-sort-type a cada celda del encabezado
headerCell1.setAttribute("data-sort-type", "asc");
headerCell2.setAttribute("data-sort-type", "asc");
headerCell3.setAttribute("data-sort-type", "asc");
headerCell4.setAttribute("data-sort-type", "asc");
// Agregar event listener a cada celda del encabezado
headerCell1.addEventListener("click", function() { sortTable(0); });
headerCell2.addEventListener("click", function() { sortTable(1); });
headerCell3.addEventListener("click", function() { sortTable(2); });
headerCell4.addEventListener("click", function() { sortTable(3); });
headerRow.appendChild(headerCell1);
headerRow.appendChild(headerCell2);
headerRow.appendChild(headerCell3);
headerRow.appendChild(headerCell4);
table.appendChild(headerRow);
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].split(",");
var row = document.createElement("tr");
if (i % 2 == 0) {
row.style.backgroundColor = "#d1f0d1";
} else {
row.style.backgroundColor = "#ffdede";
}
for (var j = 0; j < cols.length; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(cols[j]));
row.appendChild(cell);
}
row.addEventListener("click", function() {
var rowContent = "";
for (var k = 0; k < this.cells.length; k++) {
rowContent += this.cells[k].innerHTML + "|";
}
alert(rowContent);
});
table.appendChild(row);
}
document.getElementById("table-container").appendChild(table);
function sortTable(columnIndex) {
var rows = Array.from(table.rows).slice(1); // exclude header row
rows.sort(function(rowA, rowB) {
var cellA = rowA.cells[columnIndex].textContent.trim();
var cellB = rowB.cells[columnIndex].textContent.trim();
if (cellA < cellB) {
return ascending ? -1 : 1;
} else if (cellA > cellB) {
return ascending ? 1 : -1;
} else {
return 0;
}
});
for (var i = table.rows.length - 1; i >= 1; i--) {
table.deleteRow(i);
}
// re-insert sorted rows
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
// alternar color de fondo de la fila
if (i % 2 == 0) {
row.style.backgroundColor = "#d1f0d1";
} else {
row.style.backgroundColor = "#ffdede";
}
table.appendChild(row);
}
// toggle sort direction for next click
ascending = !ascending;
}
</script>
</body>
</html>
|
8.- Ordenar tabla de Google Sheet. PHP.
php/googlesheet5.php
googlesheet5.php |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tabla con CSS y ordenamiento</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #d1f0d1;
}
tr:nth-child(odd) {
background-color: #ffdede;
}
</style>
</head>
<body>
<?php
$url_rango1 = "https://docs.google.com/spreadsheets/d/1M9Tfz0O1a0sBwze-hobrbmdEhvivwKITijj85WKWSqM/gviz/tq?tqx=out:csv&range=A1:B21&sheet=hoja1";
$url_rango2 = "https://docs.google.com/spreadsheets/d/1M9Tfz0O1a0sBwze-hobrbmdEhvivwKITijj85WKWSqM/gviz/tq?tqx=out:csv&range=D1:E21&sheet=hoja1";
// Descargar los datos del rango 1
$datos_rango1 = file_get_contents($url_rango1);
$filas_rango1 = str_getcsv($datos_rango1, "\n");
// Descargar los datos del rango 2
$datos_rango2 = file_get_contents($url_rango2);
$filas_rango2 = str_getcsv($datos_rango2, "\n");
// Unir los datos de ambos rangos
$datos_unidos = "";
for ($i = 0; $i < count($filas_rango1); $i++) {
$datos_unidos .= $filas_rango1[$i] . "," . $filas_rango2[$i] . "\n";
}
// Imprimir los datos unidos
$datos_unidos = rtrim($datos_unidos, "\n"); // Elimina último \n
$datos_unidos = str_replace('"', '', $datos_unidos); // Elimina "
?>
Click on a header.<br><br>
<div id="table-container"></div>
<script>
// var string = "Fernando,33,Granada,04\nAntonio,66,Sevilla,03\nLuis,55,Cádiz,02\nCarlos,44,Córdoba,01\nRicardo,77,Huelva,05";
var string = <?php echo json_encode($datos_unidos);
?>;
var rows = string.split("\n");
var table = document.createElement("table");
var ascending = true;
var headerRow = document.createElement("tr");
var headerCell1 = document.createElement("th");
var headerCell2 = document.createElement("th");
var headerCell3 = document.createElement("th");
var headerCell4 = document.createElement("th");
headerCell1.appendChild(document.createTextNode("Column 1"));
headerCell2.appendChild(document.createTextNode("Column 2"));
headerCell3.appendChild(document.createTextNode("Column 3"));
headerCell4.appendChild(document.createTextNode("Column 4"));
// Agregar atributos data-sort-type a cada celda del encabezado
headerCell1.setAttribute("data-sort-type", "asc");
headerCell2.setAttribute("data-sort-type", "asc");
headerCell3.setAttribute("data-sort-type", "asc");
headerCell4.setAttribute("data-sort-type", "asc");
// Agregar event listener a cada celda del encabezado
headerCell1.addEventListener("click", function() { sortTable(0); });
headerCell2.addEventListener("click", function() { sortTable(1); });
headerCell3.addEventListener("click", function() { sortTable(2); });
headerCell4.addEventListener("click", function() { sortTable(3); });
headerRow.appendChild(headerCell1);
headerRow.appendChild(headerCell2);
headerRow.appendChild(headerCell3);
headerRow.appendChild(headerCell4);
table.appendChild(headerRow);
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].split(",");
var row = document.createElement("tr");
if (i % 2 == 0) {
row.style.backgroundColor = "#d1f0d1";
} else {
row.style.backgroundColor = "#ffdede";
}
for (var j = 0; j < cols.length; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(cols[j]));
row.appendChild(cell);
}
row.addEventListener("click", function() {
var rowContent = "";
for (var k = 0; k < this.cells.length; k++) {
rowContent += this.cells[k].innerHTML + "|";
}
alert(rowContent);
});
table.appendChild(row);
}
document.getElementById("table-container").appendChild(table);
function sortTable(columnIndex) {
var rows = Array.from(table.rows).slice(1); // exclude header row
rows.sort(function(rowA, rowB) {
var cellA = rowA.cells[columnIndex].textContent.trim();
var cellB = rowB.cells[columnIndex].textContent.trim();
if (cellA.localeCompare(cellB, 'es', { sensitivity: 'base' }) < 0) {
return ascending ? -1 : 1;
} else if (cellA.localeCompare(cellB, 'es', { sensitivity: 'base' }) > 0) {
return ascending ? 1 : -1;
} else {
return 0;
}
});
for (var i = table.rows.length - 1; i >= 1; i--) {
table.deleteRow(i);
}
// re-insert sorted rows
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
// alternar color de fondo de la fila
if (i % 2 == 0) {
row.style.backgroundColor = "#d1f0d1";
} else {
row.style.backgroundColor = "#ffdede";
}
table.appendChild(row);
}
// toggle sort direction for next click
ascending = !ascending;
}
</script>
</body>
</html>
|
9.- Ordenar tabla. Google Sheet. JavaScript.
p170F_JavaScriptTablaCSS_v5.aia
php/googlesheet8.htm
googlesheet8.htm |
<!DOCTYPE html>
<html>
<head>
<title>Tabla de Datos</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
th, td {
padding: 8px;
text-align: center;
border: 1px solid #000;
cursor: pointer;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #d1f0d1;
}
tr:nth-child(odd) {
background-color: #ffdede;
}
</style>
</head>
<body>
<div id="table-container"></div>
<script>
// Obtener los datos de la hoja de cálculo y almacenarlos en la variable "datos"
var url = 'https://docs.google.com/spreadsheets/d/1M9Tfz0O1a0sBwze-hobrbmdEhvivwKITijj85WKWSqM/gviz/tq?tqx=out:csv&sheet=hoja1&range=A1:E21&tq=SELECT%20A,B,D,E';
var datos = '';
var ascending = true;
// Realizar la solicitud HTTP GET utilizando XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
datos = xhr.responseText;
var string = datos;
var rows = string.split("\n");
var table = document.createElement("table");
var ascending = false;
var headerRow = document.createElement("tr");
var headerCell1 = document.createElement("th");
var headerCell2 = document.createElement("th");
var headerCell3 = document.createElement("th");
var headerCell4 = document.createElement("th");
headerCell1.appendChild(document.createTextNode("Column 1"));
headerCell2.appendChild(document.createTextNode("Column 2"));
headerCell3.appendChild(document.createTextNode("Column 3"));
headerCell4.appendChild(document.createTextNode("Column 4"));
// Agregar atributos data-sort-type a cada celda del encabezado
headerCell1.setAttribute("data-sort-type", "asc");
headerCell2.setAttribute("data-sort-type", "asc");
headerCell3.setAttribute("data-sort-type", "asc");
headerCell4.setAttribute("data-sort-type", "asc");
// Agregar event listener a cada celda del encabezado
headerCell1.addEventListener("click", function() { sortTable(0); });
headerCell2.addEventListener("click", function() { sortTable(1); });
headerCell3.addEventListener("click", function() { sortTable(2); });
headerCell4.addEventListener("click", function() { sortTable(3); });
headerRow.appendChild(headerCell1);
headerRow.appendChild(headerCell2);
headerRow.appendChild(headerCell3);
headerRow.appendChild(headerCell4);
table.appendChild(headerRow);
for (var i = 0; i < rows.length; i++) {
var cols = rows[i].split(",");
var row = document.createElement("tr");
if (i % 2 == 0) {
row.style.backgroundColor = "#d1f0d1";
} else {
row.style.backgroundColor = "#ffdede";
}
for (var j = 0; j < cols.length; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(cols[j]));
row.appendChild(cell);
}
row.addEventListener("click", function() {
var rowContent = "";
for (var k = 0; k < this.cells.length; k++) {
rowContent += this.cells[k].innerHTML + "|";
}
alert(rowContent);
});
// Crear las celdas iniciales sin comillas dobles
for (var j = 0; j < row.cells.length; j++) {
var cell = row.cells[j];
cell.textContent = cell.textContent.replace(/"/g, '');
}
table.appendChild(row);
}
document.getElementById("table-container").appendChild(table);
}
};
xhr.send();
function sortTable(columnIndex) {
var table = document.querySelector("table");
var rows = Array.from(table.rows).slice(1); // exclude header row
ascending = !ascending; // Cambiar la dirección de ordenamiento.
rows.sort(function(rowA, rowB) {
var cellA = rowA.cells[columnIndex].textContent.trim();
var cellB = rowB.cells[columnIndex].textContent.trim();
if (cellA.localeCompare(cellB, 'es', { sensitivity: 'base' }) < 0) {
return ascending ? -1 : 1;
} else if (cellA.localeCompare(cellB, 'es', { sensitivity: 'base' }) > 0) {
return ascending ? 1 : -1;
} else {
return 0;
}
});
for (var i = table.rows.length - 1; i >= 1; i--) {
table.deleteRow(i);
}
// Re-insertar filas ordenadas
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
// Alternar color de fondo de la fila
if (i % 2 == 0) {
row.style.backgroundColor = "#d1f0d1";
} else {
row.style.backgroundColor = "#ffdede";
}
// Crear las celdas actualizadas sin comillas dobles
for (var j = 0; j < row.cells.length; j++) {
var cell = row.cells[j];
cell.textContent = cell.textContent.replace(/"/g, '');
}
table.appendChild(row);
}
}
</script>
</body>
</html>
|
10.- JSON a tabla.
p170F_JavaScriptTablaJSON.aia
__________________________________
|
