LightDark
El filtrado de tablas HTML es una característica útil que permite a los usuarios encontrar información específica de manera rápida y eficiente. Sin embargo, cuando se utilizan sub-tablas dentro de las filas de una tabla principal, puede surgir un problema: las sub-tablas tienden a desaparecer al aplicar el filtrado. En este artículo, exploraremos cómo solucionar este problema y asegurar que suas tablas y sub-tablas permanezcan visibles durante el filtrado.
Entendiendo el Problema
Código JavaScript Actual
El código JavaScript proporcionado realiza un filtrado básico, pero no considera la presencia de sub-tablas. Aquí hay un fragmento del código:
function filter_country_table_country_name_or_code() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("country_name_or_code_input");
filter = input.value.toUpperCase();
table = document.getElementById("country_table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}Solución Sugerida
Para que las sub-tablas se mantengan visibles, es necesario realizar una pequeña modificación en el código de filtrado. Una posible solución es revisar tanto la fila principal como la sub-tabla dentro de ella al momento de determinar si se debe mostrar u ocultar. Aquí hay una versión modificada del código:
function filter_country_table_country_name_or_code() {
var input, filter, table, tr, td, i, txtValue, subTableVisible;
input = document.getElementById("country_name_or_code_input");
filter = input.value.toUpperCase();
table = document.getElementById("country_table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
subTableVisible = false;
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
subTableVisible = true; // Mantenemos visible la sub-tabla
} else {
var subTable = tr[i].getElementsByTagName("table")[0];
if (subTable) {
var subTd = subTable.getElementsByTagName("td");
for (var j = 0; j < subTd.length; j++) {
if (subTd[j].textContent.toUpperCase().indexOf(filter) > -1) {
subTableVisible = true;
break;
}
}
}
}
if (!subTableVisible) {
tr[i].style.display = "none";
}
}
}
}Conclusión
El filtrado de tablas HTML puede ser una herramienta poderosa, pero debe ser implementado cuidadosamente para mantener la funcionalidad deseada. Al modificar el código para considerar tanto las filas principales como sus sub-tablas, podemos asegurar que toda la información relevante siga siendo accesible a los usuarios.
Implementar esta solución ayudará a mejorar la experiencia del usuario al interactuar con tablas que contienen sub-tablas. ¡Prueba esta solución en tu proyecto y observa cómo mejora la visibilidad de tus datos!