Al mostrar datos tabulares en una página Web mediante una tabla HTML , es posible que desee utilizar el color para mejorar la pantalla o hacer que los datos de la tabla más legible. Hay dos formas de cambiar el color de fondo de una fila en una tabla HTML con JavaScript. El primer método utiliza JavaScript por sí mismo , y la segunda utiliza CSS y JavaScript . Instrucciones
1
Crear un nuevo archivo HTML con un editor de texto o el Bloc de notas . Introduzca un esqueleto HTML y cambiar el título si lo deseas . ! Por ejemplo , escriba:
< DOCTYPE HTML PUBLIC " - //W3C //DTD XHTML 1.0 Transitional //EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1 - transitional.dtd ">
< p >
Row Página 2 <p> Crear una tabla HTML entre las etiquetas "body" . Por ejemplo , escriba: <br> <p> <table <br> 3 <p> Obtener un puntero al elemento de la tabla y obtener una matriz de punteros a cada fila de la tabla a través de sus etiquetas de " tr " . Acceder al atributo " backgroundColor " directamente a cambiarlo. Por ejemplo, escriba : <br> <p> <script type="text/javascript"> <br> <p> var tabla = document.getElementById ( " myTable "); <br> filas var <p> = table.getElementsByTagName ( "tr "); <br> <p> filas [ 0 ] = style.backgroundColor "# F30 "; . . <br> filas <p> [ 1 ] style.backgroundColor = "# 09C " , <br> <p> < /script> <br> 4 <p> Crear un estilo CSS y lo coloca entre las etiquetas "cabeza" de la página web. Por ejemplo , escriba: . <p> <br> <style Type="text/css"> <br> <p> siquiera { backgroundColor : # F30 } <br> <p> impar { backgroundColor : . # 00C <br> <p> } < /style> <br> 5 <p> Escribir una función de JavaScript que se inserta la clase CSS para cambiar el color de fondo. Por ejemplo, escriba : <br> <p> <script type="text/javascript"> <br> <p> var tabla = document.getElementById ( " myTable "); <br> filas var <p> = table.getElementsByTagName ( "tr "); <br> filas <p> [ 0 ] className = "aun " ; . <br> filas <p> [ 1 ] className = "extraño" ; . <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='/Programacion/javascript-programming/91024.html' >Cómo cambiar el contenido de un iFrame con JavaScript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/91026.html' >Cómo ejecutar código JavaScript en una página 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"> Artículos 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="/Programacion/javascript-programming/90883.html" title="Cómo obtener el ID de un objeto en jQuery " target="_self">Cómo obtener el ID de un objeto en jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91130.html" title="Cómo deshabilitar ActiveSync Microsoft " target="_self">Cómo deshabilitar ActiveSync Microsoft </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90967.html" title="Cómo explotar una cadena con JavaScript " target="_self">Cómo explotar una cadena con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91226.html" title="Cómo controlar las barras de desplazamiento Con Javascript " target="_self">Cómo controlar las barras de desplazamiento Con Javasc…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90903.html" title="Cómo deshabilitar JavaScript durante el uso de selenio " target="_self">Cómo deshabilitar JavaScript durante el uso de selenio…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91266.html" title="Cómo convertir de cadena a entero en Javascript " target="_self">Cómo convertir de cadena a entero en Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91056.html" title="Cómo detectar el sistema operativo con JavaScript " target="_self">Cómo detectar el sistema operativo con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90904.html" title="Cómo llamar a un iFrame través de un formulario " target="_self">Cómo llamar a un iFrame través de un formulario </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91127.html" title="Cómo crear aplicaciones Silverlight con JavaScript " target="_self">Cómo crear aplicaciones Silverlight con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90912.html" title="Cómo comprobar si DIV Got Focus en Javascript " target="_self">Cómo comprobar si DIV Got Focus en 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">Artículos destacados </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="/Programacion/visual-basics-programming/94957.html" title="Cómo utilizar VB6 para conectarse a un servidor IRC " target="_self">Cómo utilizar VB6 para conectarse a un servidor IRC </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94743.html" title="Tipos anulables en VB.Net " target="_self">Tipos anulables en VB.Net </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/perl-programming/93397.html" title="Cómo instalar manualmente Módulo Perl en Windows Vista " target="_self">Cómo instalar manualmente Módulo Perl en Windows Vist…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/89983.html" title="Cómo comparar números enteros en Java " target="_self">Cómo comparar números enteros en Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/95263.html" title="Cómo ejecutar un archivo EXE de Visual Basic 6 " target="_self">Cómo ejecutar un archivo EXE de Visual Basic 6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/92906.html" title="Cómo quitar clave principal de MySql " target="_self">Cómo quitar clave principal de MySql </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/93612.html" title="Cómo hacer un diccionario con dos llaves en Python " target="_self">Cómo hacer un diccionario con dos llaves en Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/95781.html" title="Cómo establecer el orden Z programación en Visual Basic " target="_self">Cómo establecer el orden Z programación en Visual Bas…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/92197.html" title="Cómo combinar dos Resultados de MySQL en PHP " target="_self">Cómo combinar dos Resultados de MySQL en PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/89691.html" title="Cómo llamar a la API de Google Translate en Mi Android " target="_self">Cómo llamar a la API de Google Translate en Mi Android…</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 © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
