April 28
È possibile nascondere una tabella HTML in una pagina Web in due modi: farla sparire e lasciare un buco dietro, o comprimere la tabella e recuperare lo spazio tabella occupa. Il metodo scelto dipende dagli obiettivi di progettazione. Per esempio, non si può preoccuparsi crollare tavolini se si vuole semplicemente nascondere i dati della tabella da parte degli utenti. D'altra parte, la compressione di una grande tabella HTML e rimuovendo lo spazio che essa occupa libera spazio sprecato, consentendo di visualizzare informazioni più importanti. Aggiungere un breve "hideTable" funzione JavaScript per l'applicazione per dare la possibilità di nascondere e mostrare le tabelle su richiesta.
1 Avviare un editor HTML e aprire un documento HTML.
2 Copiare e incollare il seguente codice nella sezione body del documento:
<Table id = confine "Table1" = "1">
<Tr>
<Td> rossa </ td>
<Td> giallo </ td>
<Td> verde </ td>
</ Tr>
<Tr>
<Td> blu </ td>
<Td> viola </ td>
<Td> arancione </ td>
</ Tr>
</ Table>
<Input type = valore "pulsante" = "Nascondi tabella Metodo 1" onclick = "return hideTable ( 'tabla1', 'block')" />
<Input type = valore "pulsante" = "Nascondi tabella Metodo 2" onclick = "return hideTable ( 'tabla1', 'visibilità')" />
<Input type = valore "pulsante" = "Mostra tabella Metodo 1" onclick = "tornare showTable ( 'tabla1', 'block')" />
<Input type = valore "pulsante" = "Mostra tabella Metodo 2" onclick = "return showTable ( 'tabla1', 'visibilità')" />
Il tag "tavolo" crea una tabella. Il primo pulsante chiama una funzione JavaScript denominato "hideTable" quando si fa clic. L'evento click passa l'ID del tavolo, "Table1" e la parola "blocco" per la funzione. La funzione, quando si riceve la parola "blocco", rimuove la tabella dalla vista e non lascia spazio vuoto dietro. La funzione collassa tabella. Il secondo pulsante passa la parola "visibilità" invece di "blocco" alla funzione. La funzione, quando si riceve tale parametro, rende la tabella invisibile. Gli ultimi due pulsanti consentono di ripristinare il tavolo se volete.
3 Incollare queste due funzioni JavaScript nella sezione head del documento:
<Script language = tipo "javascript" = "text / javascript">
Funzione hideTable (IDtabella, azione) {
var tableObject = document.getElementById (IDtabella);
se (azione == "visibilità")
tableObject.style.visibility = "hidden";
else if (azione == "blocco")
tableObject.style.display = "none";
} Function showTable (IDtabella, azione) {
var tableObject = document.getElementById (IDtabella);
se (azione == "visibilità")
tableObject.style.visibility = "visible";
else if (azione == "blocco")
tableObject.style.display = "blocco";
} </ Script>
La prima funzione controlla il valore della variabile "azione" passata ad esso nella lista dei parametri. La funzione decide se deve fare la tabella invisibile e lasciare un buco al suo posto, o fare la tabella invisibile e comprimere lo spazio che il tavolo occupato. La funzione "showTable" ripristina il tavolo quando viene chiamato.
4 Salvare il documento HTML e visualizzarlo nel browser. I quattro pulsanti tavolo e appaiono.
5 Fare clic sul pulsante "Hide Metodo Tabella 1". La tabella scompare e collassa qualsiasi spazio circostante. Fare clic sul pulsante "Mostra Metodo Tabella 1". La tabella riporta.
6 Fare clic sul pulsante "Hide Metodo Tabella 2". La tabella scompare e lascia un buco dietro. Fare clic sul pulsante "Mostra Metodo Tabella 2". La tabella riporta.