Markera rader i HTML-tabeller med på-klicka

När du skapar webbsidor i HTML kan du använda JavaScript-funktioner för att ändra utseendet på sidelementen i användarinteraktion. För att markera vissa rader i en tabell kan du ange Cascading Style Sheet-deklarationer för dessa rader i normalt läge och i markerat läge. Genom att lägga till en händelseloggare till radelementen kan din sida ringa en JavaScript-funktion för att utföra onclicks, ändra elementets klassnamnattribut dynamiskt och därefter ändra sitt utseende.

Skapa din HTML-tabell. Lägg till följande provmarkupkod till din webbsida-fil:

1	2	3
4	5	6

Denna tabell innehåller två rader vardera med tre kolumner. Var och en av cellerna har ett nummer i det för demonstration, men du kan inkludera innehåll som du gillar på din egen sida.

Lägg till en sektion för CSS i huvuddelen av din sida. Mellan huvudetiketterna för öppning och stängning i filen lägger du till följande CSS-kodschema:

Denna kod anger tabellraderna för att ha en vit bakgrund som standard, med en röd bakgrund när användaren klickar på dem. Du kan ändra dessa inställningar för att spegla stilen på din egen sida. När användaren först tittar på sidan kommer de vanliga CSS-inställningarna att gälla, vilket indikeras av tabellradsklassattributen i den ursprungliga HTML-koden.

Lägg till en sektion för JavaScript i sidans huvudavsnitt. Mellan taggarna för öppning och stängning i filen lägger du till följande kod:

Detta skapar en skriptsektion och en funktionsschema. Webbläsaren kommer att ringa den här funktionen när användaren klickar på någon av dina tabellrader och skickar ID-attributvärdet för raden som klickas så att skriptet kan identifiera det.

Ändra klassnamnet på dina tabellrader. När funktionen körs betyder det att användaren har klickat på ett radelement. Lägg till följande kod i din JavaScript-funktion, hämta en referens till tabellraderelementet på sidan: var row = document.getElementById (rowID);

Lägg till följande rad för att få en strängkopia av det aktuella klassnamnet på ditt tabellraderelement: var curr = row.className;

Lägg till ett villkorligt uttalande som skräddarsy ditt tabellraderutseende: om (curr.indexOf ("normal")> = 0) row.className = "highlight"; annars row.className = "normal";

Om din tabellraden för närvarande är inställd som vanligt, ändras funktionen för att ha status som höjdpunkt. Om den är markerad för närvarande ändras funktionen till normal. Detta kommer att skapa en växelverkan, med markeringsstatusen växlande varje gång användaren klickar på raden.

Spara filen och öppna sidan i ett webbläsarprogram. Testa sidan genom att klicka flera gånger på raderna. Du bör se bakgrundsfärgbytet varje gång du klickar på en rad. Om sidan inte markerar raderna genom att klicka, kolla koden och öppna den igen. Förbättra koden för att ge den nivå av markering och presentation du vill ha din webbplats att ha.