Het wijzigen van de tabel achtergrondkleuren met Javascript



JavaScript is een client-side scripting taal die kan worden gebruikt voor het dynamisch wijzigen van bijna elk aspect van een web-pagina, met inbegrip van stijlen die zijn gedefinieerd en geïmplementeerd met trapsgewijze opmaakmodellen (CSS). JavaScript kan programmeurs om functies die worden uitgevoerd wanneer een gebruiker met de gebruikersinterface, bijvoorbeeld communiceert door te klikken op de knoppen of hyperlinks te maken. Deze functies kunnen vervolgens wijzigen sommige aspecten van de gebruikersinterface, bijvoorbeeld door het veranderen van de achtergrondkleur van een HTML-"< tabel >" tag.

Instructies

1

Open een teksteditor en maak een nieuw bestand met de naam changeBackground.html. Sommige HTML-codes toevoegen aan het bestand waarin een open "< html >" tag, een open "< body >" tag, een afsluiting, een open "< head >" tag, een afsluitende "< / head >" tag "< / body >" tag, en een afsluiting "< / html >" tag. Deze markeringen bestaan uit een eenvoudige schets van de HTML-pagina.

< html >

< hoofd >< / head >

< lichaam >< / body >

< / html >

2

ChangeBackground.html bewerken en toevoegen van een tag "< style >" tussen de "< head >" en "< / head >" tags. Stel het kenmerk style "type" naar "text/css". Een stijl voor de "< tabel >" HTML-code maken en instellen van de stijl breedte "200px", van de stijl te "200px" hoogte, en van de stijl-achtergrondkleur op "blauw". Voegt een "< / style >" tag om te sluiten van de stijl.

< html >

< head >

< stijl type = "text/css" >

tabel {}

breedte: 200px;

hoogte: 200px;

achtergrond-kleur: blauw;

}

< / style >

< / head >

< lichaam >< / body >

< / html >

3

Voeg een JavaScript "< script >" tag tussen de "< head >" en "< / head >" tags onmiddellijk na de "< / style >" tag. Voeg een JavaScript-functie nadat de "< script >" tag met de naam "changeTable()". De changeTable()-functie neemt één argument, "kleur", en het argument waarde wordt de kleur van de achtergrond van de tabel. Voeg een paar accolades ("{}") geven de locatie voor de functie van de code en het invoegen van een "< / script >" tag om te sluiten van het script.

< html >

< head >

< stijl type = "text/css" >

tabel {}

breedte: 200px;

hoogte: 200px;

achtergrond-kleur: blauw;

}

< / style >

< script type = "text/javascript" >

functie changeTable(color)

{

}

< / script >

< / head >

< lichaam >< / body >

< / html >

4

Bewerk de changeTable functie. Een opdracht tussen de twee accolades waarmee wordt de achtergrondkleur van een tabel, "pageTable", ingesteld op de kleur die is opgeslagen in de variabele kleur toevoegen.

< html >

< head >

< stijl type = "text/css" >

tabel {}

breedte: 200px;

hoogte: 200px;

achtergrond-kleur: blauw;

}

< / style >

< script type = "text/javascript" >

functie changeTable(color)

{

document.getElementById('pageTable').style.backgroundColor = kleur;

}

< / script >

< / head >

< lichaam >< / body >

< / html >

5

Voeg een link ("< a >") label tussen de "< body >" en "< / body >" tags. Waarde van de koppeling href aan 'javascript:void(0)' om terug te keren null wanneer de koppeling wordt geklikt. Een onclick()-gebeurtenis toevoegt aan de link die de functie changeTable(color) aanroept en geeft de waarde 'groen'. Geef de link de tekstwaarde "Change tabel color groen." Plaatst u een close "< /a >" tag.

< html >

< head >

< stijl type = "text/css" >

tabel {}

breedte: 200px;

hoogte: 200px;

achtergrond-kleur: blauw;

}

< / style >

< script type = "text/javascript" >

functie changeTable(color)

{

document.getElementById('pageTable').style.backgroundColor = kleur;

}

< / script >

< / head >

< body >

< een href="javascript:void(0)" onclick="changeTable('green');" > omzetten in tabel kleur groen. < /a >

< / body >

< / html >

6

Voeg een tweede link ("< a >")-code. Waarde van de tag href aan 'javascript:void(0)' om terug te keren null wanneer de koppeling wordt geklikt. Een onclick()-gebeurtenis toevoegt aan de link die de functie changeTable(color) aanroept en geeft de waarde 'yellow'. Geef de link de tekstwaarde "Change tabel color op geel." Plaatst u een close "< /a >" tag.

< html >

< head >

< stijl type = "text/css" >

tabel {}

breedte: 200px;

hoogte: 200px;

achtergrond-kleur: blauw;

}

< / style >

< script type = "text/javascript" >

functie changeTable(color)

{

document.getElementById('pageTable').style.backgroundColor = kleur;

}

< / script >

< / head >

< body >

< een href="javascript:void(0)" onclick="changeTable('green');" > omzetten in tabel kleur groen. < /a >

< een href="javascript:void(0)" onclick="changeTable('yellow');" > omzetten in tabel kleur geel. < /a >

< / body >

< / html >

7

Een "< tabel >" tag na de link tags toevoegen. De "< table >" tag een id "pageTable" geven. Een open label "< tr >" en een open "< td >" tag toevoegen. Sluit de "< /td > tag en sluiten de"< /tr >"tag. Sluit de "< / table >" tag en opslaan en sluiten changeBackground.html.

< html >

< head >

< stijl type = "text/css" >

tabel {}

breedte: 200px;

hoogte: 200px;

achtergrond-kleur: blauw;

}

< / style >

< script type = "text/javascript" >

functie changeTable(color)

{

document.getElementById('pageTable').style.backgroundColor = kleur;

}

< / script >

< / head >

< body >

< een href="javascript:void(0)" onclick="changeTable('green');" > omzetten in tabel kleur groen. < /a >

< een href="javascript:void(0)" onclick="changeTable('yellow');" > omzetten in tabel kleur geel. < /a >

< tabel-id = "pageTable" >

< tr >

< td >

< /td >

< /tr >

< / table >

< / body >

< / html >

8

Open changeBackground.html in een webbrowser. Een blauwe 200px door 200px tabel worden op de pagina weergegeven. Klik op de link 'Wijzigen tabel kleur groen.' en controleer of dat van de tabel achtergrond in groen verandert. Klik op de link 'Wijzigen tabel kleur naar geel.' en controleer of dat van de tabel achtergrond gewijzigd in geel.

Tips & waarschuwingen

  • JavaScript kan worden gebruikt voor het wijzigen van afzonderlijke rijen in tabellen ("< tr >"), of afzonderlijke cellen ("< td >").
  • JavaScript kan worden gebruikt om vrijwel elk tabelstijlelement, met inbegrip van randen, breedte en hoogte stijlen wijzigen.
  • JavaScript-functies en de code kunnen worden gebruikt om te wijzigen van stijlen die zijn opgenomen in de externe opmaakmodellen en interne opmaakmodellen inlinestijlen.
  • Tabellen moeten worden gebruikt voor gegevens in tabelvorm presenteren. Tabellen zijn niet een beste praktijk-aanpak wanneer ze worden gebruikt om de gebruikersinterfaces implementeren.