Slik skjuler tabeller i HTML

Du kan skjule en HTML-tabell på en webside på to måter: Gjør det forsvinne og la et hull bak, eller skjule tabellen og ta tilbake plassen på tabellen opptar. Metoden du velger avhenger av dine design mål. For eksempel kan du ikke bryr seg om å bryte sammen små bord hvis du bare ønsker å skjule tabellens data fra brukere. På den annen side, kollapset en stor HTML-tabell og fjerne plass som den opptar frigjør bortkastet plass, slik at du kan vise mer viktig informasjon. Legg til en kort "hideTable" Javascript-funksjonen til søknaden din til å gi det muligheten til å skjule og vise bord på forespørsel.

Bruksanvisning

1 Start en HTML-editor og åpne et HTML-dokument.

2 Kopier og lim inn følgende kode inn i dokumentets hoveddel:

<Table id = "Tabell1" border = "1">

<Tr>

<Td> rød </ td>

<Td> gul </ td>

<Td> grønn </ td>

</ Tr>

<Tr>

<Td> blå </ td>

<Td> lilla </ td>

<Td> orange </ td>

</ Tr>

</ Table>

<Input type = "button" value = "Hide Tabell Metode 1" onclick = "return hideTable ( 'table1', 'block')" />

<Input type = "button" value = "Hide Tabell Metode 2" onclick = "return hideTable ( 'table1', 'synlighet')" />

<Input type = "button" value = "Vis tabell Metode 1" onclick = "return showTable ( 'table1', 'block')" />

<Input type = "button" value = "Vis tabell Metode 2" onclick = "return showTable ( 'table1', 'synlighet')" />

Den "tabellen" tag lager en tabell. Den første knappen kaller en Javascript-funksjon som heter "hideTable" når den klikkes. Den klikkhendelsen passerer tabellens id, "Tabell1" og ordet "blokk" til funksjonen. Funksjonen, når du mottar ordet "block", fjerner tabellen fra visningen og etterlater ingen tomt område bak. Funksjonen kollapser tabellen. Den andre knappen passerer ordet "synlighet" i stedet for "blokk" til funksjonen. Funksjonen, når du mottar som parameter, gjør tabellen usynlig. De to siste knappene kan du gjenopprette bordet hvis du ønsker.

3 Lim disse to Javascript-funksjoner i dokumentets hodedelen:

<Script language = "javascript" type = "text / javascript">

funksjon hideTable (TABLEID, handling) {

Var tableObject = document.getElementById (TABLEID);

if (handling == "synlighet")

tableObject.style.visibility = "skjult";

else if (handling == "blokk")

tableObject.style.display = "ingen";

} Funksjon showTable (TABLEID, handling) {

Var tableObject = document.getElementById (TABLEID);

if (handling == "synlighet")

tableObject.style.visibility = "synlig";

else if (handling == "blokk")

tableObject.style.display = "block";

} </ Script>

Den første funksjonen sjekker verdien av "action" variable ble overført i parameterlisten. Funksjonen avgjør så om det skulle gjøre tabellen usynlig og la et hull i stedet, eller gjøre tabellen usynlig og skjule plass at tabellen okkupert. Den "showTable" funksjonen gjenoppretter tabellen når den kalles.

4 Lagre HTML-dokumentet og vise den i nettleseren din. Tabellen og fire knapper.

5 Klikk på "Hide Tabell Metode 1" -knappen. Tabellen forsvinner og kollapser noen plass rundt den. Klikk på "Vis tabell Metode 1" -knappen. Tabellen returnerer.

6 Klikk på "Hide Tabell Metode 2" -knappen. Tabellen forsvinner og etterlater et hull bak. Klikk på "Vis tabell Metode 2" -knappen. Tabellen returnerer.

Hint

  • For å spare plass på siden din eller fjerne unødvendige tabeller, kaller "hideTable" -funksjonen og passerer det "blokk" parameter. Brukerne vil aldri vite at et bord finnes på siden. Bestå bordets id-verdi til den funksjon som er vist i eksempelet. Hvis du har flere bord, gi dem unike id-verdier og skjule dem også ved å kalle "hideTable" -funksjonen og bestått sine id-verdier til funksjonen.