Cambiar Color de fila al pasar el mouse

ArmandoGlam · #1 (**permalink**) 30/10/2012, 18:36

Hola que tal a todos, tengo una duda con respecto a esto, espero puedan ayudarme.... saben que quiero que algunas de las filas de una tabla cambien de color al pasar el mouse... encontre este script de otro chico del foro:

Código:

<style type="text/css">
table {border-collapse:collapse;border:1px solid maroon;margin-left:80px}
td {border:1px solid maroon;width:30px;text-align:center}
</style>
<script type="text/javascript">
<!--
function ini() {
  tab=document.getElementById('tabla');
  for (i=0; ele=tab.getElementsByTagName('td')[i]; i++) {
    ele.onmouseover = function() {iluminar(this,true)}
    ele.onmouseout = function() {iluminar(this,false)} 
  }
}

function iluminar(obj,valor) {
  fila = obj.parentNode;

    for (i=0; ele = fila.getElementsByTagName('td')[i]; i++)
      ele.style.background = (valor) ? '#B9F8F8' : '';
}
-->
</script>
</head>
<body onload="ini()">
<p>
</p>
<table id="tabla" border="1">
<tr>
<td>1.1</td><td>1.2</td><td>1.3</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td>
</tr>
<tr>
<td>3.1</td><td>3.2</td><td>3.3</td>
</tr>
</table>
</body>

yo lo inclui en mi pagina. y le coloque el color rosa claro q yo queria y todo marcha bien... pero tengo un problema y es el siguiente:

https://docs.google.com/open?id=0BzXM1QGCj9wFVzhEaHFRTUJUdGM

(en la imagen se observa como cambia a rosa claro y no quiero q lo haga la primera fila, solo quiero q cambien los registros. no los titulos ni nada.)

cuando coloco el mouse sobre la primera, segunda. y ultima fila.. tambien me lo cambia...

quisiera saber como evitar que cambie en esas tres? gracias

ArmandoGlam · #2 (**permalink**) 30/10/2012, 20:27

ya he logrado que no me tome las dos primeras filas al modificar el valor de inicialización de i en 8... ya que... 1 es la columna de arriba.. y 7 son las columnas de la seguna fila: 1+7: 8, el efecto empieza desde la octava columna.... todo va bien... pero no logro hacer que no me tome la ultima? por favor ayuda

function ini() {
tab=document.getElementById('tablaprincipal');
for (i=8; ele=tab.getElementsByTagName('td')[i]; i++) {
ele.onmouseover = function() {iluminar(this,true)}
ele.onmouseout = function() {iluminar(this,false)}
}
}

jpurizaca · #3 (**permalink**) 31/10/2012, 16:15

Si quieres cambiar el color de la fila al pasar el mouse deberias usar css ejemplo:

Código HTML:

Ver original<html>
<head>
<title>Ejemplo by jpurizaca</title>
<style>
.alternar:hover{ background-color:#B9F8F8;}
</style>
</head>
 
<body>
 
<table>
    <tr>
        <td>Titulo 1</td>
        <td>Titulo 2</td>
        <td>Titulo 3</td>
    </tr>
    <tr class="alternar">
        <td>Registro1</td>
        <td>Registro1</td>
        <td>Registro1</td>
    </tr>
    <tr class="alternar">
        <td>Registro2</td>
        <td>Registro2</td>
        <td>Registro2</td>
    </tr>
</table>
 
</body>
</html>

ArturoGallegos · #4 (**permalink**) 31/10/2012, 20:10

como bien dijo el compañero @jpurizaca eso se hace con CSS usar Javascript es una maña de antaño...

aunque yo mejoraría su ejemplo con

Código CSS:

Ver originaltr:hover td{background:red;}

Código HTML:

Ver original<table>
    <tr>
        <th>Titulo 1</th>
        <th>Titulo 2</th>
        <th>Titulo 3</th>
    </tr>
    <tr class="alternar">
        <td>Registro1</td>
        <td>Registro1</td>
        <td>Registro1</td>
    </tr>
    <tr class="alternar">
        <td>Registro2</td>
        <td>Registro2</td>
        <td>Registro2</td>
    </tr>
</table>

los títulos en una tabla son con <th>, por lo que si quieres afectar las filas excepto títulos es una buena idea atacar directamente por los <td>, principalmente cuando la tabla es muy larga y te ahorras escribir una clase en cada <tr> como el ejemplo del compañero.

ArmandoGlam · #5 (**permalink**) 31/10/2012, 22:55

graciaaaaaaas con los ejemplos del final lo he logrado muchas gracias les agradesco el tiempo que se tomaron en contestarme los dos

. tremendamente agradecido saludos