Hvordan endre en rad Color på Mouse

Hvordan endre en rad Color på Mouse


Komplekse tabeller av data kan være det beste formatet for webansvarlige for å vise komplisert og mangesidig informasjon, som massive lagerlister med sett med tilsvarende informasjon eller årlige salgsrapporter for produkter på tvers av et mangfoldig merkevare. Cascading Style Sheet (CSS) koding brukes til å lage disse tabellene, men slike tette lister er ikke alltid lett å lese. Ved å bruke en mouse som endrer bakgrunnsfargen på en hel rad i en tid da en besøkende passerer hans markøren over raden, kan dataene bli isolert og leser uten problemer.

Bruksanvisning

1 Åpne HTML-filen i Notisblokk eller din foretrukne ren tekst editor. Legg til denne koden i CSS:

<Style type = "text / css">

table {color: #FFFFFF; font-family: Arial, Verdana}

.normal {background-color: # 000000}

.normalActive {background-color: # 999999}

</ Style>

<Table class = "ex" width = "500" cellspacing = "1">

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normal'" class = "normal">

<Td> Rad 1 Kolonne 1 </ td>

<Td> Rad 1 Kolonne 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normal'" class = "normal">

<Td> Rad 2 Kolonne 1 </ td>

<Td> Row 2 Kolonne 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normal'" class = "normal">

<Td> Rad 3 kolonne 1 </ td>

<Td> Rad 3 kolonne 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normal'" class = "normal">

<Td> Rad 4 Kolonne 1 </ td>

<Td> Rad 4 Kolonne 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normal'" class = "normal">

<Td> Rad 5 Kolonne 1 </ td>

<Td> Rad 5 Kolonne 2 </ td>

</ Tr>

<Tr onmouseover = "this.className = 'normalActive'" onmouseout = "this.className = 'normal'" class = "normal">

<Td> Rad 6 Kolonne 1 </ td>

<Td> Rad 6 Kolonne 2 </ td>

</ Tr>

</ Table>

2 Erstatt "FFFFFF" med ønsket tekst fargekode for dataene i datatabellen. Erstatt "000000" med ønsket fargekode for datatabellen bakgrunn. Erstatt "999999" med ønsket bakgrunnsfarge-kodeendring når en besøkende passerer hans markøren over en rad. Bruk heksadesimale fargekode diagram funnet i Resources.

3 Sett på rad og kolonne tekst med de ønskede data som skal vises i disse cellene.

4 Lagre og laste opp HTML-fil.