Ved visning tabeldata på en webside ved hjælp af en HTML-tabel , kan du ønsker at bruge farver til at forbedre skærmen eller gøre data i tabellen mere læselige. Der er to måder at ændre baggrundsfarven i en række i en HTML- tabel ved hjælp af JavaScript. Den første metode anvender JavaScript ved sig selv, og den anden bruger CSS og JavaScript . Instruktioner
1
Opret en ny HTML-fil ved hjælp af en teksteditor eller Notesblok. Indtast en HTML skelet og ændre titlen som ønsket. ! Skriv f.eks : Hej
< DOCTYPE html PUBLIC "- //W3C //DTD XHTML 1.0 Transitional //EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd " >
< p >
Row <br> 2 <p> Opret en HTML-tabel mellem " Body" tags. Skriv f.eks : Hej <p> < table <br> 3 <p> Få en pointer til bordet element og få en bred vifte af henvisninger til hver række i tabellen gennem deres "tr " tags. Adgang til " backgroundColor " attribut direkte at ændre det. Skriv for eksempel : <br> <p> <script type="text/javascript"> <br> <p> var table = document.getElementById ( " MinTabel ") <br> <p> VAR rækker = table.getElementsByTagName ( "tr ") <br> <p> rækker [ 0 ] style.backgroundColor = " # F30 ", . . <br> <p> rækker [1] style.backgroundColor = " # 09C " < br > <p> < /script> <br> 4 <p> Opret en CSS stil og placere den mellem "hoved" -tags på websiden . Skriv f.eks : . <br> <p> <style Type="text/css"> <br> <p> selv { backgroundColor : # F30 } <br> <p> ulige { backgroundColor : . # 00C } <br> <p> </style > <br> 5 <p> Skriv en JavaScript-funktion , der indsætter CSS klassen til at ændre baggrundsfarven. Skriv for eksempel : <br> <p> <script type="text/javascript"> <br> <p> var table = document.getElementById ( " MinTabel ") <br> <p> VAR rækker = table.getElementsByTagName ( "tr ") <br> <p> rækker [0] className = " selv " . <br> <p> rækker [1] className = " odd " . <br> <p> < ;/script > <br> <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Forrige ： <a class='LinkPrevArticle' href='/Programmering/javascript-programming/91024.html' >Sådan ændre indholdet af en iFrame Med JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> næste ： <a class='LinkNextArticle' href='/Programmering/javascript-programming/91026.html' >Sådan kører JavaScript på en webside </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Relaterede artikler </td>
</tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90885.html" title="Hvordan laver man en applet i NetBeans " target="_self">Hvordan laver man en applet i NetBeans </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91059.html" title="Sådan Set Focus med jQuery " target="_self">Sådan Set Focus med jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91050.html" title="Hvordan skal tjekkes browser type i JavaScript " target="_self">Hvordan skal tjekkes browser type i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90977.html" title="Sådan får Int Værdier i jQuery " target="_self">Sådan får Int Værdier i jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91080.html" title="Hvordan laver flytte tekst i Steam Games " target="_self">Hvordan laver flytte tekst i Steam Games </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91006.html" title="Sådan Find ud af hvor mange billeder er i en DIV med Javascript " target="_self">Sådan Find ud af hvor mange billeder er i en DIV med J…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90816.html" title="Sådan bruges JQuery til Indsæt et anker " target="_self">Sådan bruges JQuery til Indsæt et anker </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90990.html" title="Sådan Indsæt Elements Med DIV i JavaScript " target="_self">Sådan Indsæt Elements Med DIV i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90969.html" title="Sådan Skjul flere Elementer i Javascript " target="_self">Sådan Skjul flere Elementer i Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91024.html" title="Sådan ændre indholdet af en iFrame Med JavaScript " target="_self">Sådan ændre indholdet af en iFrame Med JavaScript </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Anbefalede Artikler </td>
</tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/86629.html" title="Hvad er Script Debugging " target="_self">Hvad er Script Debugging </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/php-mysql-programming/92879.html" title="Sådan Set Up en PHP hjemmeside " target="_self">Sådan Set Up en PHP hjemmeside </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/cc-programming/85837.html" title="Hvordan skal tjekkes heltaloverflow " target="_self">Hvordan skal tjekkes heltaloverflow </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/88296.html" title="Sådan validere en e-mailadresse i ASP.Net " target="_self">Sådan validere en e-mailadresse i ASP.Net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/python-programming/94118.html" title="Sådan Send en mobiltelefon en tekstmeddelelse med en Python Script " target="_self">Sådan Send en mobiltelefon en tekstmeddelelse med en P…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/php-mysql-programming/92810.html" title="Sådan krypteres en fil i PHP " target="_self">Sådan krypteres en fil i PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/python-programming/93994.html" title="Hvordan man laver en global variabel i Python " target="_self">Hvordan man laver en global variabel i Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/php-mysql-programming/92669.html" title="Hvordan Lær SQL Online for Free " target="_self">Hvordan Lær SQL Online for Free </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/java-programming/90189.html" title="Sådan Execute Konsol Kommandoer i Java " target="_self">Sådan Execute Konsol Kommandoer i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/python-programming/93739.html" title="Sådan bruges Python skal tjekkes , om en database eksisterer " target="_self">Sådan bruges Python skal tjekkes , om en database eksi…</a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=middle>Copyright © Computer Viden http://www.computerdk.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> 