Come cambiare sfondo della tabella colori con JavaScript

January 12

Come cambiare sfondo della tabella colori con JavaScript


JavaScript è un linguaggio di scripting lato client che può essere utilizzato per modificare dinamicamente quasi ogni aspetto di una pagina web, compresi gli stili che sono definiti e realizzati con i fogli di stile a cascata (CSS). JavaScript consente ai programmatori di creare funzioni che vengono eseguiti quando un utente interagisce con l'interfaccia utente, ad esempio, facendo clic sui pulsanti o collegamenti ipertestuali. Queste funzioni possono successivamente alterare alcuni aspetti dell'interfaccia utente, per esempio, cambiando il colore di un "<table>" tag HTML sfondo.

istruzione

1 Aprire un editor di testo e creare un nuovo file chiamato changeBackground.html. Aggiungere alcuni tag HTML per il file che includono un tag aperto "<html>", un "<head>" tag aperto, una chiusura "</ head>" tag, un open "<body>" tag, una chiusura "< / body> "tag, e una chiusura" </ html> tag ". Questi tag comprendono una struttura di base pagina HTML.

<Html>

<Head> </ head>

<Body> </ body>

</ Html>

2 Modifica changeBackground.html e aggiungere un "<style>" tag tra il "<head>" e "</ head>" tag. Impostare l'attributo di stile "tipo" a "text / css". Creare uno stile per il "<table>" tag HTML e impostare la larghezza dello stile di "200px", l'altezza dello stile di "200px", e dello stile background-color a "blu". Inserire una "<style />" tag per chiudere lo stile.

<Html>

<Head>

<Style type = "text / css '>

tavolo {

width: 200px;

height: 200px;

background-color: blue;

}

</ Style>

</ Head>

<Body> </ body>

</ Html>

3 Aggiungere un tag JavaScript "<script>" tra il "<head>" e "</ head>" tag immediatamente dopo il tag "</ style>". Aggiungere una funzione JavaScript dopo il tag "<script>" nome "CHANGETABLE ()". La funzione CHANGETABLE () accetta un argomento, "colore", e utilizza il valore dell'argomento al colore di sfondo del tavolo. Inserire un paio di parentesi graffe ( "{}") per indicare la posizione per il codice della funzione e inserire un tag "</ script>" per chiudere lo script.

<Html>

<Head>

<Style type = "text / css '>

tavolo {

width: 200px;

height: 200px;

background-color: blue;

}

</ Style>

<Script type = "text / javascript '>

Funzione CHANGETABLE (colore)

{

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

4 Modificare la funzione di CHANGETABLE. Aggiungere un comando tra le due parentesi graffe che imposta il colore di una tabella di fondo, "pagetable", per il colore memorizzato nella variabile colore.

<Html>

<Head>

<Style type = "text / css '>

tavolo {

width: 200px;

height: 200px;

background-color: blue;

}

</ Style>

<Script type = "text / javascript '>

Funzione CHANGETABLE (colore)

{

. Document.getElementById ( 'pagetable') style.backgroundColor = colore;

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

5 Aggiungere un collegamento ( "<a>") tra il tag "<body>" e "</ body>" tag. Impostare il valore href del link "javascript: void (0)" per tornare null quando il link viene cliccato. Aggiungere un evento onclick () per il collegamento che chiama la funzione CHANGETABLE (colore) e passa il valore 'verde'. Dare il link il valore di testo "Modificare il colore tabella di verde." Inserire un tag di chiusura "</a>".

<Html>

<Head>

<Style type = "text / css '>

tavolo {

width: 200px;

height: 200px;

background-color: blue;

}

</ Style>

<Script type = "text / javascript '>

Funzione CHANGETABLE (colore)

{

. Document.getElementById ( 'pagetable') style.backgroundColor = colore;

}

</ Script>

</ Head>

<Body>

<a href="javascript:void(0)" onclick="changeTable('green');"> Cambia colore tavolo verde. </a>

</ Body>

</ Html>

6 Aggiungere un secondo link tag ( "<a>"). Impostare il valore href del tag per "javascript: void (0)" per tornare null quando il link viene cliccato. Aggiungere un evento onclick () per il collegamento che chiama la funzione CHANGETABLE (colore) e passa il valore 'giallo'. Dare il link il valore di testo "Cambia colore tabella di giallo." Inserire un tag di chiusura "</a>".

<Html>

<Head>

<Style type = "text / css '>

tavolo {

width: 200px;

height: 200px;

background-color: blue;

}

</ Style>

<Script type = "text / javascript '>

Funzione CHANGETABLE (colore)

{

. Document.getElementById ( 'pagetable') style.backgroundColor = colore;

}

</ Script>

</ Head>

<Body>

<a href="javascript:void(0)" onclick="changeTable('green');"> Cambia colore tavolo verde. </a>

<a href="javascript:void(0)" onclick="changeTable('yellow');"> Cambia colore tabella di colore giallo. </a>

</ Body>

</ Html>

7 Aggiungere un tag "<table>" dopo i tag di collegamento. Dare il tag "<table>" un id "pagetable". Aggiungere un "<tr>" tag aperto e un tag aperto "<td>". Chiudere il "</ td> tag e chiudere il" </ tr> "tag. Chiudere il" tag </ table> "e salvare e chiudere changeBackground.html.

<Html>

<Head>

<Style type = "text / css '>

tavolo {

width: 200px;

height: 200px;

background-color: blue;

}

</ Style>

<Script type = "text / javascript '>

Funzione CHANGETABLE (colore)

{

. Document.getElementById ( 'pagetable') style.backgroundColor = colore;

}

</ Script>

</ Head>

<Body>

<a href="javascript:void(0)" onclick="changeTable('green');"> Cambia colore tavolo verde. </a>

<a href="javascript:void(0)" onclick="changeTable('yellow');"> Cambia colore tabella di colore giallo. </a>

<Table id = "pagetable">

<Tr>

<Td>

</ Td>

</ Tr>

</ Table>

</ Body>

</ Html>

8 Aprire changeBackground.html in un browser web. Un 200px blu da 200px tabella verrà visualizzata sulla pagina. Clicca su "Cambia Colore tavolo verde." Link e verificare che lo sfondo del tavolo diventa verde. Clicca su "Cambia Colore tavolo al giallo." Link e verificare che lo sfondo del tavolo cambia in giallo.

Consigli e avvertenze

  • JavaScript può essere utilizzato per modificare singole righe all'interno delle tabelle ( "<tr>"), o cellule singole ( "<td>").
  • JavaScript può essere utilizzato per modificare qualsiasi elemento di stile di tabella, comprese le frontiere, larghezza, altezza e stili.
  • funzioni e il codice JavaScript può essere utilizzato per modificare gli stili che sono inclusi nei fogli di stile esterni, i fogli di stile interni o stili inline.
  • Le tabelle devono essere utilizzati per presentare i dati in formato tabulare. Le tabelle non sono un approccio best practice quando vengono utilizzati per implementare interfacce utente.