Rijen in HTML-tabellen markeren met Aan Klik

Wanneer u webpagina's in HTML maakt, kunt u JavaScript-functies gebruiken om het uiterlijk van pagina-elementen bij gebruikersinteractie te wijzigen. Als u bepaalde rijen in een tabel wilt markeren, kunt u Cascading Style Sheet-declaraties instellen voor deze rijen in hun normale status en in hun gemarkeerde staat. Door een gebeurtenislistenerattribuut aan de rijelementen toe te voegen, kan uw pagina een JavaScript-functie aanroepen om onclicks uit te voeren, de klassennamen van het element dynamisch te wijzigen en vervolgens hun uiterlijk te wijzigen.

1.

Maak uw HTML-tabel. Voeg de volgende voorbeeldmarkup-code toe aan uw webpaginabestand:

Deze tabel bevat twee rijen met elk drie kolommen. Elk van de cellen heeft een nummer voor demonstratie, maar u kunt elke gewenste inhoud opnemen op uw eigen pagina.

2.

Voeg een sectie voor CSS toe aan het kopgedeelte van uw pagina. Voeg de volgende CSS-codes toe tussen de tags voor het openen en sluiten van het hoofd in uw bestand:

Deze code stelt de tabelrijen standaard in op een witte achtergrond, met een rode achtergrond wanneer de gebruiker erop klikt. U kunt deze instellingen aanpassen aan de stijl van uw eigen pagina. Wanneer de gebruiker de pagina voor het eerst bekijkt, zijn de normale CSS-instellingen van toepassing, zoals aangegeven door de klassenkenmerken van de tabelrij in de oorspronkelijke HTML-code.

3.

Voeg een sectie voor JavaScript toe aan uw paginahoofdgedeelte. Voeg de volgende code toe tussen de tags voor het openen en sluiten van het hoofd in uw bestand:

Dit creëert een scriptsectie en een functieoverzicht. De browser roept deze functie op wanneer de gebruiker op een van uw tabelrijen klikt en de ID-kenmerkwaarde van de rij doorklikt, zodat het script deze kan identificeren.

4.

Verander de klassenaam van uw tabelrij-elementen. Wanneer de functie wordt uitgevoerd, betekent dit dat de gebruiker op een rijelement heeft geklikt. Voeg de volgende code toe aan uw JavaScript-functie en verkrijg een verwijzing naar het tabelrijelement op de pagina: var row = document.getElementById (rowID);

Voeg de volgende regel toe om een ​​tekenreekskopie van de huidige klassenaam van uw tabelrijelement te krijgen: var curr = row.className;

Voeg een voorwaardelijke verklaring toe die het uiterlijk van uw tabelrij afstemt: if (curr.indexOf ("normal")> = 0) row.className = "highlight"; else row.className = "normaal";

Als uw tabelrij momenteel als normaal is ingesteld, verandert de functie deze om een ​​status van markering te krijgen. Als deze momenteel gemarkeerd is, verandert de functie deze weer naar normaal. Hierdoor wordt een schakelingseffect gecreëerd, waarbij de gemarkeerde status telkens verandert wanneer de gebruiker op de rij klikt.

5.

Sla uw bestand op en open de pagina in een webbrowserprogramma. Test de pagina door herhaaldelijk op de rijen te klikken. De achtergrondkleur moet elke keer dat u op een rij klikt, worden gewijzigd. Als de pagina de rijen bij het klikken niet markeert, controleert u uw code en opent u deze opnieuw. Verbeter de code om het niveau van markering en presentatie te bieden dat u op uw site wilt hebben.

Tip

• Door aan uw CSS-code toe te voegen, kunt u de tekstkleur en andere eigenschappen van uw tabelrijen dicteren in elke staat.

Waarschuwing

• JavaScript en CSS hebben verschillende resultaten voor verschillende browsers, dus testen is essentieel.