[SOLUCIONADO] suma con celdas

cogswap · #1 (**permalink**) 28/04/2015, 08:59

Hola estoy intentando hacer lo siguiente pero no me sale...

Quiero hacer como una tabla de suma coloreando las filas pares e impares

Soy capaz de colorear filas pares e impares y la función de la suma que he hecho funciona, pero cuando mezclo todo se produce el desastre, soy totalmente novato en javascript.

Un estilo a que me salga ésto, como en la imagen:

Alguien me puede ayudar?

Os puedo pasar mi código por privado o le expongo aquí?

Gracias por adelantado.

Alexis88 · #2 (**permalink**) 28/04/2015, 10:19

Bienvenido a FDW.

Para poder ayudarte, muéstranos el código que has elaborado, para lo cual debes de utilizar el Highlight respectivo, que en este caso sería el de JavaScript.

Saludos

PHPeros · #3 (**permalink**) 28/04/2015, 10:33

Lo de las celdas se podría hacer con CSS3:

Código CSS:

Ver originalli:nth-child(even) {
    background: green;
}
li:nth-child(odd) {
    background: orange;
}

cogswap · #4 (**permalink**) 29/04/2015, 00:48

Hola no me dejan usar el comando

Código:

 li:nth-child(even)

en la practica, me piden hacerlo de otra forma que no sea eso. os pongo el popurri de lo que he hecho a ver si podéis hacerlo funcionar...muchas gracias.

Cogí una función que pinta las lineas pero en cuanto la mezclo con lo que tengo hecho de la suma no me sale nada, si comento esa linea me sale la suma pero no colorea claro...
Os pongo el html con el javascript integrado, a ver si podéis ayudarme a rematarlo, perdonar por las barbaridades que os encontréis...si que me dejan usar css3 pero sin el child que comentaba PHPeros.
Gracias por adelantado.

Código HTML:

Ver original<html>
<head>
 
<script language="javascript">
 
 
    function suma(){
    
    
 
    
    document.write("<table border='1'><tr><td> x </td><td>x + 2</td></tr>");
        for(i=1; i<=99; i++){
           
            document.write("<tr><td>"+ i +"</td><td>"  + (2 + i) + "</td></tr>");
            
            //pinta();  //si descomento esta linea, no me sale ya la tabla...algo esta mal    
        }
    
    
    
    document.write("</table>");   
    
    }
    
    
    
function pinta(){
    cual=document.getElementById("tabla").rows;
 
    for(a=0;a<cual.length;a++){
        color(a);
    }
 
}
 
function color(b){
    if(b%2==0)
        cual[b].style.backgroundColor="#ff0000";
    else
        cual[b].style.backgroundColor="#0000ff";
}
 
 
</script>
 
</head>
 
<body onload="suma()">
 
 
<table width=100 height=300 border=1 id="tabla">
 
//<tr><td>aqui la i</td><td>aqui la suma de i + 2</td></tr>
//<tr><td>aqui la i</td><td>aqui la suma de i + 2</td></tr>  
//</table>
 
 
</body>
</html>

Alexis88 · #5 (**permalink**) 29/04/2015, 10:05

No hay necesidad de que por cada fila creada vuelvas a recorrer las demás para asignar los colores, basta con que lo hagas en cada iteración.

Código Javascript:

Ver originalfor (var i = 1, color; i < 99; i++){
    //También puedes usar operadores ternarios: color = i % 2 == 0 ? "green" : "orange";
 
    if (i % 2 == 0){
        color = "green";
    }
    else{
        color = "orange";
    }
 
    tabla.innerHTML += "<tr style = 'background:" + color + "'><td>" + i + "</td><td>" + (2 + i) + "</td></tr>";
}

Saludos

cogswap · #6 (**permalink**) 29/04/2015, 10:27

Pero entonces el código definitivo sería como te pongo a continuación?
Algo se me pasa porque no me sale nada al ejecutarlo.
Perdón por la pesadez.

Código HTML:

Ver original<html>
<head>
 
<script language="javascript">
 
 
    function suma(){
    
    
 
    
    for (var i = 1, color; i < 99; i++){
    //También puedes usar operadores ternarios: color = i % 2 == 0 ? "green" : "orange";
 
    if (i % 2 == 0){
        color = "green";
    }
    else{
        color = "orange";
    }
 
    tabla.appendChild("<tr style = 'background:" + color + "'><td>" + i + "</td><td>" + (2 + i) + "</td></tr>");
}
 
    
    }
    
  
 
</script>
 
</head>
 
<body onload="suma()">
 
 
 
 
 
</body>
</html>

Alexis88 · #7 (**permalink**) 29/04/2015, 10:42

Cambia el appendChild() por un innerHTML+= como está en el ejemplo que te puse y crea la tabla con el id 'tabla' tal y como lo tenías, porque, de otro modo, las nuevas filas no se asignarán a ningún elemento. También crea las respectivas cabeceras (la primera fila) y asigna el color que corresponda.

Saludos

cogswap · #8 (**permalink**) 30/04/2015, 00:54

Lo he puesto así pero debo hacerlo mal, estoy a dos velas :)

Código HTML:

Ver original<html>
<head>
 
<script language="javascript">
 
 
    
    
    
 
    
    for (var i = 1, color; i < 99; i++){
    //También puedes usar operadores ternarios: color = i % 2 == 0 ? "green" : "orange";
 
    if (i % 2 == 0){
        color = "green";
    }
    else{
        color = "orange";
    }
 
     tabla.innerHTML += "<tr style = 'background:" + color + "'><td>" + i + "</td><td>" + (2 + i) + "</td></tr>";
}
 
    
    
    
  
 
</script>
 
</head>
 
<body onload="suma()">
 
<table width=100 height=300 border=1 id="tabla">
 
 
</table>
 
</body>
    
 
    
</html>

Puedes dejármelo para que funcione? y para que salga la cabecera de la primera fila?

Gracias y perdona por el tostón.

cogswap · #9 (**permalink**) 30/04/2015, 01:06

Uys en el codigo se me habia olvidado

Código Javascript:

Ver originalfunction suma(){

Ahora si que sale solo me falta como hago para poner la cabecera (primera fila) sin cargarme todo?

Muchas gracias!

cogswap · #10 (**permalink**) 30/04/2015, 01:14

Al final he logrado lo de la cabecera también!!
Muchísimas gracias por vuestra ayuda!!