Fremheve rader i HTML-tabeller med på-klikk

Når du oppretter websider i HTML, kan du bruke JavaScript-funksjoner for å endre utseendet til sideelementer på brukerinteraksjon. Hvis du vil markere bestemte rader i et bord, kan du angi Cascading Style Sheet-deklarasjoner for disse radene i normal tilstand og i uthevet tilstand. Ved å legge til en hendelseslytterattributt til radelementene, kan siden din ringe en JavaScript-funksjon for å utføre onclicks, endre elementets klassenavnetattributter dynamisk og deretter endre utseendet.

1.

Opprett HTML-tabellen. Legg til følgende prøveoppslagskode til websidens fil:

Denne tabellen inneholder to rader hver med tre kolonner. Hver av cellene har et nummer i det for demonstrasjon, men du kan inkludere alt innhold du liker på din egen side.

2.

Legg til en seksjon for CSS i hovedenheten på siden din. Mellom åpnings- og lukkehodens koder i filen, legg til følgende CSS-kodeoversikt:

Denne koden angir tabellrader for å ha en hvit bakgrunn som standard, med en rød bakgrunn når brukeren klikker på dem. Du kan endre disse innstillingene for å gjenspeile stilen på din egen side. Når brukeren først ser på siden, vil de vanlige CSS-innstillingene gjelde, som angitt av tabellruteklasseattributtene i den opprinnelige HTML-koden.

3.

Legg til en seksjon for JavaScript i sidens hode seksjon. Mellom åpnings- og lukkehodens koder i filen legger du til følgende kode:

Dette skaper et script-avsnitt og en funksjonsoversikt. Nettleseren vil ringe denne funksjonen når brukeren klikker på noen av tabellrader, og passerer ID-attributtverdien av raden klikket slik at skriptet kan identifisere det.

4.

Endre klassenavnet på tabellraderelementene dine. Når funksjonen utføres, betyr dette at brukeren har klikket på et radelement. Legg til følgende kode i JavaScript-funksjonen din, og hente en referanse til tabellraderelementet på siden: var row = document.getElementById (rowID);

Legg til følgende linje for å få en strengkopi av det nåværende klassenavnet til tabellraderelementet: var curr = row.className;

Legg til en betinget uttalelse som skredder utseende på ditt bordrad: hvis (curr.indexOf ("normal")> = 0) row.className = "highlight"; ellers row.className = "normal";

Hvis tabellraden din for øyeblikket er satt som normalt, vil funksjonen endre den for å få status som høydepunkt. Hvis den nå er uthevet, endrer funksjonen den tilbake til normal. Dette vil skape en bytteeffekt, med høydepunktsstatusen vekslende hver gang brukeren klikker på raden.

5.

Lagre filen og åpne siden i et nettleserprogram. Test siden ved å klikke gjentatte ganger på radene. Du bør se bakgrunnsfargeendringen hver gang du klikker på en rad. Hvis siden ikke markerer radene ved å klikke, merker du koden og åpner den igjen. Forbedre koden for å gi nivået på utheving og presentasjon du vil at nettstedet ditt skal ha.

Tips

• Ved å legge til CSS-koden, kan du diktere tekstfargen og andre egenskaper i tabellrader i hver stat.

Advarsel

• JavaScript og CSS har forskjellige resultater på tvers av nettlesere, så testing er viktig.