Fremhævning af rækker i HTML-tabeller med on-klik

Når du opretter websider i HTML, kan du bruge JavaScript-funktioner til at ændre udseendet af sideelementer på brugerinteraktion. Hvis du vil markere bestemte rækker i en tabel, kan du angive Cascading Style Sheet-deklarationer for disse rækker i deres normale tilstand og i deres fremhævede tilstand. Ved at tilføje en hændelseslytter til rækkeelementerne kan din side kalde en JavaScript-funktion til at udføre onclicks, ændre elementets klassenavneattributter dynamisk og derefter ændre deres udseende.

Opret din HTML-tabel. Tilføj følgende sample markup kode til din webside fil:

1	2	3
4	5	6

Denne tabel indeholder to rækker hver med tre kolonner. Hver af cellerne har et nummer i det til demonstration, men du kan inkludere alt indhold du kan lide på din egen side.

Tilføj et afsnit til CSS i hovedafsnittet på din side. Mellem åbnings- og lukkehovedetiketterne i din fil skal du tilføje følgende CSS-kodeoversigt:

Denne kode angiver tabelrækker for at have en hvid baggrund som standard med en rød baggrund, når brugeren klikker på dem. Du kan ændre disse indstillinger for at afspejle stilen på din egen side. Når brugeren først får vist siden, gælder de normale CSS-indstillinger, som angivet af tabelrækklassetattributterne i den oprindelige HTML-kode.

Tilføj en sektion for JavaScript i din sideoverskrift. Mellem de åbne og lukkehovedetiketter i din fil skal du tilføje følgende kode:

Dette skaber et script afsnit og en funktion skitse. Browseren kalder denne funktion, når brugeren klikker på en af dine tabelrækker, idet han sender ID-attributværdien af den række, der klikkes, så scriptet kan identificere det.

Ændre klassenavnet på dine tabelrækkeelementer. Når funktionen udføres, betyder det, at brugeren har klikket på et rækkeelement. Tilføj følgende kode inde i din JavaScript-funktion, ved at hente en henvisning til tabelrækkeelementet på siden: var row = document.getElementById (rowID);

Tilføj følgende linje for at få en strengkopi af det aktuelle klassenavn på dit tabelrækkeelement: var curr = row.className;

Tilføj en betinget erklæring, der skræddersy dit bordrækkeudseende: hvis (curr.indexOf ("normal")> = 0) row.className = "highlight"; ellers row.className = "normal";

Hvis din tabelrække er indstillet som normalt, ændrer funktionen den for at få status som fremhævning. Hvis det aktuelt fremhæves, ændrer funktionen den tilbage til normal. Dette vil skabe en skifteffekt, med højdepunktsstatus skifte hver gang brugeren klikker på rækken.

Gem din fil, og åbn siden i et webbrowserprogram. Test siden ved at klikke gentagne gange på rækkerne. Du bør se baggrundsfarveændringen hver gang du klikker på en række. Hvis siden ikke markerer rækkerne ved at klikke, skal du tjekke din kode og åbne den igen. Forbedre koden for at give niveauet for fremhævning og præsentation, du vil have dit websted til at have.