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."