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="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div>
</div>
<div class=contentpage>
<div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-el-contenido-de-un-iFrame-con-JavaScript-.html' >Cómo cambiar el contenido de un iFrame con JavaScript </a> </div>
<div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-ejecutar-código-JavaScript-en-una-página-Web-.html' >Cómo ejecutar código JavaScript en una página Web </a> </div>
</div>
<dl class=xgc>
<dt><span>JavaScript Programación</span></dt>
<dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Listo-pero-con-errores-en-IE-JS-objeto-esperado-.html">Listo pero con errores en IE JS objeto esperado </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-un-JavaScript-Compras-.html">Cómo hacer un JavaScript Compras </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/XML-Tool-Tip-Tutorial-.html">XML Tool Tip Tutorial </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-que-su-propia-función-en-jQuery-.html">Cómo hacer que su propia función en jQuery </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Comunes-estilos-de-fuente-.html">Comunes estilos de fuente </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-reemplazar-IgnoreCase-.html">Cómo reemplazar IgnoreCase </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/JavaScript-como-un-código-de-servidor-para-Apache-.html">JavaScript como un código de servidor para Apache </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-hacer-un-contador-de-tiempo-en-el-Game-Maker-.html">Cómo hacer un contador de tiempo en el Game Maker </a></dd>
</dl>
</div>
<!--right-->
<div class=rightmain>
<div class=esrightlist>
<div class=e1>Los últimos artículos de equipo</div>
<ul>
<li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-obtener-valores-de-una-lista-desplegable-en-Javascript-on-Post-.html" >Cómo obtener valores de una lista desplegable en Javascript on Post </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-colores-de-pintura-.html" >Cómo crear colores de pintura </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-insertar-PHP-en-JavaScript-.html" >Cómo insertar PHP en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-actualizar-las-variables-de-sesión-.html" >Cómo actualizar las variables de sesión </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-redirigir-a-otra-página-en-JavaScript-.html" >Cómo redirigir a otra página en JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Las-propiedades-de-iFrame-en-Java-.html" >Las propiedades de iFrame en Java </a> </li>
</ul>
</div>
<div class=esrightlist>
<div class=e1>Artículos de la popular computadora</div>
<ul>
<li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-el-cursor-sobre-Rollover-Rollover-.html" >Cómo cambiar el cursor sobre Rollover Rollover </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-expresiones-regulares-con-JavaScript-.html" >Cómo utilizar expresiones regulares con JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/JavaScript-para-determinar-si-un-elemento-está-deshabilitado-.html" >JavaScript para determinar si un elemento está deshabilitado </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-Float-con-JavaScript-.html" >Cómo agregar Float con JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-texto-basado-Browser-Games-.html" >Cómo crear texto basado Browser Games </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/La-combinación-de-teclas-de-acceso-rápido-JavaScript-.html" >La combinación de teclas de acceso rápido JavaScript </a></li>
</ul>
</div>
<div class="esrightad">
<script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script>
</div>
<div class=esrightlist>
<div class=e1>Más categorías</div>
<ul>
<li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li>
<li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li>
<li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li>
<li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li>
<li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li>
</ul>
</div>
</div>
<!--right end-->
<div class="cl"></div>
</div>
<div class=esfoot>
<div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div>
</div>
</body>
</html> 