Quando la visualizzazione di dati tabulari in una pagina Web utilizzando una tabella HTML , si potrebbe desiderare di utilizzare il colore per migliorare la visualizzazione o rendere i dati nella tabella più leggibile . Ci sono due modi per cambiare il colore di una riga sfondo in una tabella HTML con JavaScript. Il primo metodo utilizza JavaScript per sé , e il secondo utilizza CSS e JavaScript . Istruzioni
1
Creare un nuovo file HTML utilizzando un editor di testo o Notepad . Inserisci uno scheletro HTML e modificare il titolo , se lo desideri . Ad esempio, digitare : !
< 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> Creare una tabella HTML tra i tag "body" . Ad esempio, digitare : <br> <p> < table <br> 3 <p> ottenere un puntatore all'elemento tabella e ottenere un array di puntatori a ogni riga della tabella attraverso i loro tag "tr" . Accedere l'attributo " backgroundColor " direttamente a cambiarlo. Ad esempio, digitare : <br> <p> <script type="text/javascript"> <br> <p> var table = document.getElementById ( " myTable " ) ; <br> righe var <p> = table.getElementsByTagName ( "tr" ) ; <br> <p> righe [ 0 ] = style.backgroundColor " # F30 "; . . <br> righe <p> [ 1 ] style.backgroundColor = " # 09C " ; <br> <p> < /script > <br> 4 <p> Creare uno stile CSS e metterlo tra i tag "head " della pagina web . Ad esempio, digitare : . <br> <p> <style Type="text/css"> <br> <p> ancora { backgroundColor : # F30 } <br> <p> dispari { backgroundColor : . # 00C } <br> <p> < /style > <br> 5 <p> Scrivi una funzione JavaScript che inserisce la classe CSS per modificare il colore di sfondo . Ad esempio, digitare : <br> <p> <script type="text/javascript"> <br> <p> var table = document.getElementById ( " myTable " ) ; <br> righe var <p> = table.getElementsByTagName ( "tr" ) ; <br> righe <p> [ 0 ] = className "anche " ; . <br> righe <p> [ 1 ] className = "dispari" ; . <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>Previous ： <a class='LinkPrevArticle' href='/Programmazione/javascript-programming/91024.html' >Come modificare il contenuto di un iFrame con JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/javascript-programming/91026.html' >Come esecuzione di JavaScript in una pagina Web </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"> Articoli Correlati </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="/Programmazione/javascript-programming/91176.html" title="Stampa Tutorial per Javascript " target="_self">Stampa Tutorial per Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91009.html" title="Come visualizzare le Ore e Minuti in due campi con Javascript " target="_self">Come visualizzare le Ore e Minuti in due campi con Java…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90888.html" title="Come usare Prototype JS " target="_self">Come usare Prototype JS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91187.html" title="Come abilitare il controllo server Utilizzando Javascript " target="_self">Come abilitare il controllo server Utilizzando Javascri…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90983.html" title="Come nascondere tutti i div Aperte in JavaScript " target="_self">Come nascondere tutti i div Aperte in JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91240.html" title="Java Script Risoluzione dei problemi " target="_self">Java Script Risoluzione dei problemi </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91106.html" title="API per lo sviluppo di Google Maps " target="_self">API per lo sviluppo di Google Maps </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91274.html" title="Come confrontare le stringhe in JavaScript " target="_self">Come confrontare le stringhe in JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91076.html" title="Come ottenere una remota pagina Web con JavaScript " target="_self">Come ottenere una remota pagina Web con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91197.html" title="Javascript Timer Tutorial " target="_self">Javascript Timer Tutorial </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">Articoli in evidenza </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="/Programmazione/visual-basics-programming/95189.html" title="Come fare giochi in VB.NET " target="_self">Come fare giochi in VB.NET </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/90462.html" title="Come aggiungere Chat per il tuo sito " target="_self">Come aggiungere Chat per il tuo sito </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/94948.html" title="Tipi di caselle di immissione in VBA " target="_self">Tipi di caselle di immissione in VBA </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88148.html" title="Certificazione Net Architettura " target="_self">Certificazione Net Architettura </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92815.html" title="Come caricare i file PDF in PHP " target="_self">Come caricare i file PDF in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/php-mysql-programming/92515.html" title="Come convertire un array in una stringa in PHP " target="_self">Come convertire un array in una stringa in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/ruby-programming/94210.html" title="Come installare Rails su un RC di Ubuntu " target="_self">Come installare Rails su un RC di Ubuntu </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/python-programming/93694.html" title="Come fare nomi globali Python " target="_self">Come fare nomi globali Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88371.html" title="Come modificare la colonna Ordine in ALTER TABLE " target="_self">Come modificare la colonna Ordine in ALTER TABLE </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/87025.html" title="Come creare nuovi simboli in lattice " target="_self">Come creare nuovi simboli in lattice </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 © Conoscenza Informatica http://it.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> 