Ao exibir dados tabulares em uma página da Web usando uma tabela HTML , você pode querer usar a cor para melhorar a exibição ou tornar os dados na tabela mais legível. Há duas maneiras de alterar a cor de uma linha de fundo em uma tabela HTML usando JavaScript. O primeiro método usa JavaScript , por si só , ea segunda usa CSS e JavaScript. Instruções
1
Crie um novo arquivo HTML usando um editor de texto ou bloco de notas. Digite um esqueleto HTML e alterar o título se o desejar. Por exemplo, digite :
< DOCTYPE html PUBLIC " - //W3C //DTD XHTML 1.0 Transitional //EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd " >
Row Página 2 <p> Criar uma tabela HTML entre as tags "corpo" . Por exemplo, digite : <br> <p> <table <br> 3 <p> Obter um ponteiro para o elemento da tabela e obter uma matriz de ponteiros para cada linha da tabela por meio de suas marcas "tr". Acesse o " backgroundColor " atribuir diretamente para mudá-lo . Por exemplo, digite : <br> <p> <script type="text/javascript"> <br> <p> mesa var = document.getElementById ( " myTable "); <br> <p> linhas var = table.getElementsByTagName ( "tr" ); . <br> <p> linhas [0] style.backgroundColor = "# F30 "; . <br> <p> linhas [1] style.backgroundColor = "# 09C "; <br> <p> </script> <br> 4 <p> Criar um estilo CSS e colocá-lo entre as tags "cabeça" na página da Web . Por exemplo, digite : <br> <p> <style type="text/css"> <br> <p> mesmo { backgroundColor : # F30 } . . <br> <p> Estranho { backgroundColor : # 00C } <br> <p> </style> <br> 5 <p> Escreva uma função JavaScript que insere a classe CSS para alterar a cor de fundo. Por exemplo, digite : <br> <p> <script type="text/javascript"> <br> <p> mesa var = document.getElementById ( " myTable "); <br> <p> linhas var = table.getElementsByTagName ( "tr" ); <br> <p> linhas [0] className = " mesmo "; . <br> <p> linhas [1] className = " estranho "; . <br> <p> < ;/script> <br> <br>
<div class=ptad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</div>
<div class=ptnrx></div>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Anterior : <a class='LinkPrevArticle' href='http://ptcomputador.com/P/javascript-programming/91024.html' >Como alterar o conteúdo de um iframe com JavaScript </a> </p></td>
</tr>
<tr>
<td width="49%"> Próximo : No</li></td>
</tr>
</table></td>
</tr>
</table>
<div class=bai7></div>
<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"> Os artigos relacionados </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="http://ptcomputador.com/P/javascript-programming/90925.html" title="Como substituir todos os elementos DIV " target="_self">Como substituir todos os elementos DIV </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/javascript-programming/90816.html" title="Como usar o JQuery para Inserir uma Âncora " target="_self">Como usar o JQuery para Inserir uma Âncora </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/javascript-programming/90968.html" title="Como alterar a barra de endereços no JavaScript " target="_self">Como alterar a barra de endereços no JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/javascript-programming/90858.html" title="Como inserir jQuery " target="_self">Como inserir jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/javascript-programming/90933.html" title="Como editar uma Carta em Acajoom " target="_self">Como editar uma Carta em Acajoom </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/javascript-programming/90842.html" title="JavaScript : redirecionar para a página " target="_self">JavaScript : redirecionar para a página </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/javascript-programming/90793.html" title="Como adicionar controles para o Google Maps API " target="_self">Como adicionar controles para o Google Maps API </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/javascript-programming/90825.html" title="Como girar um Cipher em JavaScript " target="_self">Como girar um Cipher em JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/javascript-programming/90863.html" title="Como usar um Lightbox em JavaScript " target="_self">Como usar um Lightbox em JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/javascript-programming/90794.html" title="JavaScript como um código do lado do servidor para o Apache " target="_self">JavaScript como um código do lado do servidor para o A…</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">Artigos em destaque </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="http://ptcomputador.com/P/computer-programming-languages/86938.html" title="Como usar calafetar em GTK Radiant " target="_self">Como usar calafetar em GTK Radiant </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/java-programming/90658.html" title="Como corrigir Java Downloading Problemas " target="_self">Como corrigir Java Downloading Problemas </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88818.html" title="Como usar Mirage OS " target="_self">Como usar Mirage OS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88072.html" title="Como criar um banco de dados usando DataSet em C # " target="_self">Como criar um banco de dados usando DataSet em C # </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/86710.html" title="A importância de Estruturas de Decisão em Programação " target="_self">A importância de Estruturas de Decisão em Programaçã…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/cc-programming/86145.html" title="C Tutorial: Tipos de Dados " target="_self">C Tutorial: Tipos de Dados </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/87179.html" title="Como ler a sintaxe de Fortran " target="_self">Como ler a sintaxe de Fortran </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/computer-programming-languages/88930.html" title="Como usar COBOL Sintaxe " target="_self">Como usar COBOL Sintaxe </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/cc-programming/85308.html" title="Como Fake um Código Modelo " target="_self">Como Fake um Código Modelo </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://ptcomputador.com/P/java-programming/89185.html" title=". Pode o Run Android Jar " target="_self">. Pode o Run Android Jar </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<div class=bai7></div>
<div class="ptbottom bs">
Cop e direita © Conhecimento computador http://ptcomputador.com Todos os Direitos Reservados
<script language='javascript' src='/ad/201310/1.js'></script>
</div>
</div>
</body>
</html> 