Soy un novato cuando se trata de HTML, CSS y JS. Tengo el siguiente fragmento de código en el que intento mostrar/ocultar una tabla. Tengo dos problemas con eso:
He estado revisando el código y no puedo entender por qué ocurren estos dos problemas. ¿Alguien puede ver los problemas?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test Report</title> <style type="text/css"> .table-content { display: inline; white-space: pre-wrap; word-wrap: break-word; } .body_foreground { color: #000000; } .body_background { background-color: #EEEEEE; } .content { display: none; overflow: hidden; } </style> </head> <body class="body_foreground body_background" style="font-size: normal;"> <pre class="table-content"> <h1>html_report</h1 s> <table id="environment"> <tr> <td>Base Version</td> <td>6.0.1</td> </tr> <tr> <td>Extended Version</td> <td>5.14.0</td> </tr> <tr> <td>Project Version</td> <td>36</td> </tr> </table> <div> <input type="button" id="env_button" onclick="toggle_env()" value="Show Environment" /> </div> </div> <script type="text/javascript"> function toggle_env() { var content = document.getElementById("environment"); if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } } </script> </pre> </body> </html>Tu botón está debajo de la mesa, así que sácalo. He eliminado un div adicional. Cambió el nombre de su etiqueta h1. y eliminé el estilo del CSS y lo agregué dentro del JS, ya que no estaba seguro de por qué.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Report</title> <style type="text/css"> .table-content { display: inline; white-space: pre-wrap; word-wrap: break-word; } .body_foreground { color: #000000; } .body_background { background-color: #eeeeee; } .content { display: none; overflow: hidden; } </style> </head> <body class="body_foreground body_background" style="font-size: normal"> <pre class="table-content"> <div> <!-- moved button to the top--> <input type="button" id="env_button" onclick="toggle_env()" value="Show Environment" /> </div> <h1>html_report</h1> <!-- You had an </h1 s> --> <table id="environment"> <tr> <td>Base Version</td> <td>6.0.1</td> </tr> <tr> <td>Extended Version</td> <td>5.14.0</td> </tr> <tr> <td>Project Version</td> <td>36</td> </tr> </table> </pre> <script type="text/javascript"> const content = document.getElementById("environment"); content.style.display = "none"; // set default state to hidden function toggle_env() { if (content.style.display === "none") { content.style.display = "block"; } else { content.style.display = "none"; } } </script> </body> </html>Primero, debe mover el botón fuera de la mesa. De lo contrario, el botón siempre estará oculto cuando la tabla esté oculta.
Luego puede usar Javascript para ocultar la tabla hasta que se haga clic en el botón.
Aquí hay un ejemplo:
// Javascript let table = document.getElementById('table') let button = document.getElementById('button') button.addEventListener('click', () => { if(table.hidden) { table.hidden = false button.innerHTML = 'Close Environment' }else{ table.hidden = true; button.innerHTML = 'Open Environment' } }) /* CSS */ table, th, td { padding: 0.5rem 1rem; border: 1px solid black; border-collapse: collapse; } button { border: none; padding: 3px; margin-bottom: 1rem; } <!-- HTML --> <button id="button">Open Environment</button> <table id="table" hidden> <tr> <td>Lorem</td> <td>Ipsum</td> </tr> </table>En cuanto a cómo hacer que el botón aparezca sobre su tabla, simplemente puede mover su div sobre el elemento de la tabla. Como esto:
<div>Your div with input element</div> <table></table>En cuanto a la razón por la que su tabla aparece cuando la página se carga por primera vez, es porque ha declarado una regla CSS incorrecta para ella. Tú tienes:
.content{ display: none; overflow: hidden; }En su lugar, debería ser:
#environment{ display: none; overflow: hidden; }Espero que esto sea útil