10811 Suscriptores al Feed del Blog
85 Suscriptores al Feed de Anotaciones Breves
35 usuarios online
diseño web valencia en 500 iconos gratuitos para tus aplicaciones web
Color alterno en las filas de una tabla
1 COMENTARIO - Publicado hace 57 meses - Clasificado en: TIPS, JAVASCRIPT, SNIPPETSDar formato a una tabla en la que el color de las filas se alternase o bien lo hacía "manualmente" o creaba un pequeño script con ASP. A medida que uno va viendo las posibilidades de los CSS y, con ayuda de un poco de Javascript, se puede lograr el mismo efecto sin necesidad hacerlo manualmente o utilizar una tecnología de servidor como ASP.
El Javascript se encarga de evaluar si la fila es par o impar y le asigna el estilo que hayamos definido para cada una de ellas:
<html>
<head>
<script>
function AplicarCebra () {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
if (tables[i].className.match(/TablaCebra/)) {
TablaCebra(tables[i]);
}
}
}
function TablaCebra (table) {
var current = "impar";
var trs = table.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].className += " " + current;
current = current == "par" ? "impar" : "par";
}
}
</script>
<style>
tr.impar { background-color: #CCCCCC; }
tr.par { background-color: #FFFFFF; }
</style>
</head>
<body onload="AplicarCebra()">
<table width="70%" class="TablaCebra">
<tr>
<td>fila1 celda1 </td>
<td>fila1 celda 2 </td>
<td>fila1 celda 3 </td>
</tr>
<tr>
<td>fila2 celda 1 </td>
<td>fila2 celda 2 </td>
<td>fila2 celda 3 </td>
</tr>
<tr>
<td>fila3 celda1 </td>
<td>fila3 celda2 </td>
<td>fila3 celda 3 </td>
</tr>
<tr>
<td>fila4 celda 1 </td>
<td>fila4 celda2 </td>
<td>fila4 celda 3 </td>
</tr>
</table>
</body>
</html>
Algunas entradas relacionadas:
- Recoger parámetros URL con Javascript
- FAQ: Abrir una ventana desde un enlace de texto
- Aumentar el tamaño de un texto con Javascript
- FAQ: Cómo hacer que el resultado de la selección de dos combos sea mostrado en un campo de texto
- Javascript: typeof
- El objeto history
- Evitar enviar dos veces un formulario
También te puede interesar:
Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.
|
|
|
|
|
COMENTARIOS
 |
Publicado hace 2 meses Xinxeta Multimedia - http://www.xinxetamultimedia.com Muchas gracias por el código... En el diseño de una nueva página web que estamos realizando http://www.presupuestin.com, ha venido, y sobretodo funcionado, de maravilla... |
