Slik skjuler en tabellcelle
Webutviklere lage spesialeffekter for å underholde besøkende og legge til funksjonalitet til nettsteder. Et viktig websiden element er HTML-tabell. Bord som består av rader og celler som er nyttige for visning av data i tabellform. Noen ganger kan du ikke ønsker alle brukere å se hver eneste celle i en tabell. I slike tilfeller trenger du ikke å lage unike tabeller til å håndtere flere situasjoner. Noen få linjer med Javascript vil gjøre det mulig å skjule en celle i ethvert bord.
Bruksanvisning
1 Åpne HTML-dokumentet med Notepad eller en HTML-editor.
2 Legg til følgende kode etter at dokumentet er "<body>" tag:
<Table id = "Tabell1" border = "2">
<Tr>
<Td id = "R 1.1"> Cell 1.1 </ td> <td id = "R1.2"> Cell 1.2 </ td>
<Td id = "r1.3"> Cell 1,3 </ td>
</ Tr>
<Tr>
<Td id = "R2.1"> Cell 2.1 </ td>
<Td id = "r2.2"> Cell 2.1 </ td>
<Td id = "R2.3"> Cell 2.3 </ td>
</ Tr>
</ Table>
<P> </ p>
<Input type = "knappen" onclick = "javascript: hideCell (" skjult "); ' verdi = 'Skjul' />
<Input type = "knappen" onclick = "javascript: hideCell (" synlig "); ' verdi = 'Vis' /> <p> </ p>
Row til Hide <input id = "hideRow" type = "text" /> <p> </ p>
Cell å skjule <input id = "hideCell" type = "text" />
Dette skaper et bord med to rekker og tre kolonner. Merk at hver celle (td) har en unik ID. ID for celle én rad én er R 1.1. ID for celle tre på rad to er R2.3. Den første tallet i ID identifiserer rad. Det andre tall angir den celletallet i den raden. De to tekstfelt lar deg legge inn en rad og en kolonne. De to knappene kalle en Javascript-funksjon som skjuler eller viser den valgte cellen. Den første knappen passerer "skjult" til funksjonen. Den andre knappen passerer "synlig".
3 Legg denne Javascript-kode til før den endelige "<head>" tag i dokumentet:
funksjon hideCell (synlighet) {
// linje 1
Var visibilityStatus = synlighet;
// linjene 2-3
. Var rowNbr = document.getElementById ( "hideRow") verdi;
Var cellNbr = document.getElementById ( "hideCell") verdi.;
// Linje 4
Var cellToHide = "r" + rowNbr + "." + CellNbr;
// Linje 5
Var targetCell = document.getElementById (cellToHide);
// Linje 6
targetCell.style.visibility = visibilityStatus;
}
Denne funksjonen aksepterer verdien at knappene passere det og lagrer verdien i "visibilityStatus." Denne verdien vil være "skjult" eller "synlig" avhengig av hvilken knapp som du klikker. Lines to gjennom tre hente rad- og celleverdier er angitt i tekstboksene. Linje fire kombinerer disse tallene inn en ID. For eksempel, hvis du skriver inn en og to i rad- og celletekstbokser, vil linjen fire kombinere disse verdiene for å skape "R1.2." Linje fem bruker denne verdien til å finne den valgte tabellcelle. Linje seks sett cellen synlighet til verdien bestått satt på linje 1.
4 Lagre HTML-fil og åpne den i nettleseren din. Du vil se tabellen med to rader og tre kolonner.
5 Skriv inn en verdi mellom en og to i "Selected Row" tekstboksen. Skriv inn en verdi mellom en og tre i "Selected Cell" tekstboksen.
6 Klikk på "Skjul". Koden vil løpe og gjemme den valgte cellen.
7 Klikk "Show". Cellen vil dukke opp igjen.
Hint
- Eksempeltabellen har to rekker og tre kolonner. Gjør ditt bord dimensjoner noe du liker å bruke samme navne sekvens for celle IDer. For eksempel, for å legge til en fjerde celle til første rad, navnet sitt ID "R1.4."