Bij het weergeven van gegevens in tabelvorm op een webpagina met behulp van een HTML-tabel , wilt u misschien kleur gebruiken om de weergave te verbeteren of om de gegevens in de tabel beter leesbaar . Er zijn twee manieren om de achtergrondkleur van een rij te wijzigen in een HTML- tabel met behulp van JavaScript . De eerste methode maakt gebruik van JavaScript op zichzelf , en de tweede maakt gebruik van CSS en JavaScript . Instructies
1 Maak een nieuwe HTML-bestand met een teksteditor of Notepad . Voer een HTML- skelet en verander de titel als gewenst . ! Typ bijvoorbeeld :
< DOCTYPE HTML PUBLIC " - //W3C //DTD XHTML 1.0 Transitional //EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd >
"
Rij <br> Pagina 2 <p> Maak een HTML-tabel tussen de "body " tags. Typ bijvoorbeeld : <br> <p> < table <br> 3 <p> Krijg een pointer naar de tafel element en krijg een array van pointers naar elke rij in de tabel door middel van hun "tr " tags. Toegang tot de " backgroundColor " attribuut direct om het te veranderen . Typ bijvoorbeeld : <p> <script type="text/javascript"> <p> var tafel <br> = document.getElementById ( " myTable " ) ; <p> var rijen <br> = table.getElementsByTagName ( "tr " ) ; <p> rijen <br> [ 0 ] style.backgroundColor = " # F30 " ; . . <p> rijen <br> [ 1 ] style.backgroundColor = " # 09C " ; < br > <p> < /script > <br> 4 <p> Maak een CSS- stijl en plaats deze tussen de "head " tags in de webpagina . Typ bijvoorbeeld : . <p> <style Type="text/css"> <br> <p> <br> zelfs { backgroundColor : # F30 } <br> <p> oneven { backgroundColor : . # 00C } <p> < /style > <br> 5 <p> Schrijf een JavaScript-functie die voegt de CSS-klasse om de achtergrondkleur te veranderen . Typ bijvoorbeeld : <p> <script type="text/javascript"> <p> var tafel <br> = document.getElementById ( " myTable " ) ; <p> var rijen <br> = table.getElementsByTagName ( "tr " ) ; <p> rijen <br> [ 0 ] className = " zelfs " ; . <p> rijen <br> [ 1 ] className = " odd " ; . <br> <p> < ;/script > <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/91024.html' >Hoe de inhoud van een iFrame Met JavaScript Verander </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/91026.html' >Hoe kan ik JavaScript Run op een webpagina </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90897.html" title="Hoe te JS gebruiken om te schrijven naar een ander document " target="_self">Hoe te JS gebruiken om te schr…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91065.html" title="Hoe maak je een Date String valideren in jQuery " target="_self">Hoe maak je een Date String va…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91054.html" title="Hoe kan ik een kolom in JavaScript Markeer " target="_self">Hoe kan ik een kolom in JavaSc…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90954.html" title="Hoe maak je een Javascript Ticker Creëren " target="_self">Hoe maak je een Javascript Tic…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90953.html" title="Hoe maak je een JavaScript associatieve array verwijderen " target="_self">Hoe maak je een JavaScript ass…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90831.html" title="JQuery Voordelen " target="_self">JQuery Voordelen </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91126.html" title="Hoe te Ie6 Block " target="_self">Hoe te Ie6 Block </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91218.html" title="Hoe te Browser Downloads Kill Met Javascript " target="_self">Hoe te Browser Downloads Kill …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91258.html" title="Hoe te Scrolling Text gebruiken in Javascript " target="_self">Hoe te Scrolling Text gebruike…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/85294.html" title="Hoe een Sound button in Xcode " target="_self">Hoe een Sound button in Xcode </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87346.html" title="Bits Vs . Bytes " target="_self">Bits Vs . Bytes </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/90048.html" title="Hoe maak je een Substring in Java Toon " target="_self">Hoe maak je een Substring in Java Toon </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/86227.html" title="Hoe te gebruiken MFC Werkbalken " target="_self">Hoe te gebruiken MFC Werkbalken </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/89079.html" title="Hoe te Hibernate gebruiken Met Eclipse " target="_self">Hoe te Hibernate gebruiken Met Eclipse </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88293.html" title="Hoe om SMS te verzenden met ASP.NET " target="_self">Hoe om SMS te verzenden met ASP.NET </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/ruby-programming/201309/94250.html" title="Hoe te Ruby Gems installeren in Linux " target="_self">Hoe te Ruby Gems installeren in Linux </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88748.html" title="Hoe Computer Algoritmes begrijpen " target="_self">Hoe Computer Algoritmes begrijpen </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/94811.html" title="De Vb.Net Data Types " target="_self">De Vb.Net Data Types </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
