Tengo una tabla con 50 filas, que es demasiado para un sitio web si miras la página por primera vez. Quiero crear un botón que pueda desplegar y plegar toda la mesa.
Mi gran problema es que no tengo conocimiento sobre javascript :(.
No quiero pegar aquí 50 filas de código... He aquí un ejemplo más breve:
<table> <tbody> <tr> <td>row 1</td> <td>row 2</td> </tr> <tr> <td>row 1</td> <td>row 2</td> </tr> <tr> <td>row 1</td> <td>row 2</td> </tr> <! --it should unfold here--> <tr> <td>row 1</td> <td>row 2</td> </tr> <tr> <td>row 1</td> <td>row 2</td> </tr> </tbody> </table> <button onclick="toggleText()" id="showMore">Show More </button>Como ves en mi ejemplo, quiero desplegar toda mi tabla después de 3 filas. ¿Qué tengo que hacer para lograr esto?
¡Muchas gracias y buen fin de semana!
Puede usar para este caso la función de alternancia de Javascript. Algo como eso:
const trs = document.getElementsByTagName("tr"); const startWith = 3; function showMore() { for (let i = startWith; i < trs.length; i++) { trs[i].classList.toggle('hidden') } } .hidden { display:none; } <table id="t"> <tbody> <tr> <td>row 1</td> <td>row 2</td> </tr> <tr> <td>row 1</td> <td>row 2</td> </tr> <tr> <td>row 1</td> <td>row 2</td> </tr> <! --it should unfold here--> <tr class="hidden"> <td>row 1</td> <td>row 2</td> </tr> <tr class="hidden"> <td>row 1</td> <td>row 2</td> </tr> </tbody> </table> <button onclick="showMore()" id="showMore">Show More </button>Como mencioné en mi comentario, simplemente puede seleccionar las filas de la tabla en exceso con la lógica del selector CSS.
function excerpt(){ var excessRows = myTable.querySelectorAll("tr:nth-child(n+4)"); excessRows.forEach(row => row.style.display = window.getComputedStyle(row).display === "none" ? "block" : "none"); } td { border : 1px solid red} tr { display : block} tr:nth-child(n+4) {display : none} <table id = "myTable"> <tbody> <tr> <td>row 1 this</td> <td>row 1 that</td> </tr> <tr> <td>row 2 this</td> <td>row 2 that</td> </tr> <tr> <td>row 3 this</td> <td>row 3 that</td> </tr> <! --it should unfold here--> <tr> <td>row 4 this</td> <td>row 4 that</td> </tr> <tr> <td>row 5 this</td> <td>row 5 that</td> </tr> </tbody> </table> <button onclick="excerpt()" id="showMore">Show More/Less</button>intente debajo del código javascript.
<script> function toggleText() { const tableRows = document.getElementsByTagName("tr"); // initialise i with row number from which you need to hide/show for (let i = 3; i < x.length; i++) { if (tableRows[i].style.display === "none") { tableRows[i].style.display = "table-row"; } else { tableRows[i].style.display = "none"; } } } </script>