Podświetlanie wierszy w tabelach HTML przy kliknięciu

Podczas tworzenia stron internetowych w HTML można używać funkcji JavaScript do zmiany wyglądu elementów strony w interakcji użytkownika. Aby wyróżnić określone wiersze w tabeli, możesz ustawić Deklaracje Kaskadowego Arkusza Stylów dla tych wierszy w ich normalnym stanie i ich wyróżnionym stanie. Dodając atrybut detektora zdarzeń do elementów wiersza, strona może wywoływać funkcję JavaScript, aby wykonać onclicks, dynamicznie zmieniając atrybuty nazwy klasy elementu, a następnie zmieniając ich wygląd.

1.

Utwórz swoją tabelę HTML. Dodaj następujący przykładowy kod znaczników do pliku strony sieci Web:

Ta tabela zawiera dwa wiersze, każdy z trzema kolumnami. Każda z komórek ma numer demonstracyjny, ale możesz umieścić dowolną treść na swojej własnej stronie.

2.

Dodaj sekcję dla CSS w sekcji head strony. Między tagami główki otwierającej i zamykającej w pliku dodaj następujący zarys kodu CSS:

Ten kod domyślnie ustawia wiersze tabeli na białe tło, a czerwone, gdy użytkownik je kliknie. Możesz zmienić te ustawienia, aby odzwierciedlały styl własnej strony. Kiedy użytkownik pierwszy raz wyświetli stronę, zastosowane zostaną normalne ustawienia CSS, jak wskazują atrybuty klasy wiersza tabeli w oryginalnym kodzie HTML.

3.

Dodaj sekcję dla JavaScript w sekcji nagłówka strony. Między tagami główki otwierającej i zamykającej w pliku dodaj następujący kod:

Spowoduje to utworzenie sekcji skryptu i zarysu funkcji. Przeglądarka wywoła tę funkcję, gdy użytkownik kliknie jeden z twoich wierszy tabeli, przekazując wartość atrybutu ID klikniętego wiersza, aby skrypt mógł go zidentyfikować.

4.

Zmień nazwę klasy elementów wiersza tabeli. Gdy funkcja jest wykonywana, oznacza to, że użytkownik kliknął element wiersza. Dodaj następujący kod do swojej funkcji JavaScript, uzyskując odniesienie do elementu wiersza tabeli na stronie: var row = document.getElementById (rowID);

Dodaj następujący wiersz, aby uzyskać ciągową kopię bieżącej nazwy klasy elementu wiersza tabeli: var curr = row.className;

Dodaj instrukcję warunkową dostosowującą wygląd wiersza tabeli: if (curr.indexOf ("normal")> = 0) row.className = "highlight"; else row.className = "normal";

Jeśli twój wiersz tabeli jest obecnie ustawiony jako normalny, funkcja zmieni go, aby mieć status podświetlenia. Jeśli jest podświetlona, ​​funkcja zmieni ją z powrotem na normalną. Spowoduje to utworzenie efektu przełączania, a stan wyróżnienia będzie się zmieniał za każdym razem, gdy użytkownik kliknie wiersz.

5.

Zapisz plik i otwórz stronę w programie przeglądarki internetowej. Przetestuj stronę, klikając wielokrotnie w wierszach. Powinieneś zobaczyć zmianę koloru tła za każdym razem, gdy klikniesz wiersz. Jeśli strona nie podświetla wierszy po kliknięciu, sprawdź swój kod i otwórz go ponownie. Ulepsz kod, aby podać poziom wyróżnienia i prezentacji, które ma mieć Twoja witryna.

Wskazówka

• Dodając do kodu CSS, możesz dyktować kolor tekstu i inne właściwości wierszy tabeli w każdym stanie.

Ostrzeżenie

• JavaScript i CSS mają różne wyniki w różnych przeglądarkach, więc testowanie jest niezbędne.