[SOLUCIONADO] Añadir estilo a unas filas.

[satjaen]

Hola, por favor quería saber si puedo darle estilo a una fila del siguiente código:

Código Javascript:

function filtrar(){
 
$.ajax({
data: $("#frm_filtro").serialize()+ordenar,
type: "POST",
dataType: "json",
url: "ajax.php?action=listar",
beforeSend:function(){
$('.carga1').css('display','block');
$('.carga1').html("<img src='imagenes_menu/ajax-loader4.gif' align='center' /><br />Cargando...");
    },  
complete: function() {
 
$(".carga1").show();
$(".carga1").hide();
 
    }, 
 success: function(data){ 
 var html_user ='' ;
 if(data.length > 0){ 
 $.each(data, function(i,item){ 
 
html_user += '<tr onclick="pulsar1(this, ' + *String.fromCharCode(39) + item.id_aviso + String.fromCharCode(39) *+ ');"     ondblclick="pulsar(this, ' +  String.fromCharCode(39) + item.id_aviso + String.fromCharCode(39) *+ ');" >';
html_user += '<td><input name="demo" type="checkbox" value="' + item.id_aviso + '"/></td>';
 html_user += '<td>'+item.id_aviso+'</td>';
 html_user += '<td>'+item.telefonos+'</td>';
 html_user += '<td>'+item.name+' '+item.apellidos+'</td>';
 html_user += '<td>'+item.calle+'</td>';
 html_user += '<td>'+item.localidad+'</td>';
 html_user += '<td>'+item.aparatos+'</td>';
 html_user += '<td>'+item.marcas+'</td>';
 html_user += '<td>'+item.facturacion+'</td>';
 html_user += '</tr>';
 
 
     }); 
  } 
 
 if(html_user == '') 
    html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
$("#data tbody").html(html_user);
$('.carga').html('');
 

Tengo que aclarar que lo que quiero es cambiar el estilo de la fila dependiendo de el valor del item recibido. Es decir si por ejemplo el valor del item facturacion es igual a 1 cambiar el color de la fila a color rojo.



Gracias un saludo

[Alexis88]

Mediante la propiedad style.

Código Javascript:

var fila = document.createElement("tr"),
    contenido = [
                  item.id_aviso, item.telefonos, 
                  item.name + ' ' + item.apellidos, item.calle,
                  item.localidad, item.aparatos, item.marcas, item.facturacion
                ];
 
if (data === 1){
    fila.style.background = "#f00";
    fila.style.color = "#fff";
}
 
for (i = 0, limite = contenido.length; i < limite; i++){
    var columna = document.createElement("td");
    columna.innerHTML = contenido[i];
    fila.appendChild(columna);
}
 
$("#data tbody").append(fila);
 

Creo un elemento de fila de tabla, inserto todos los valores en un array, compruebo el valor de data para asignarle a la fila un color de fondo y texto (rojo de fondo y blanco para el texto) y con ayuda de un bucle, recorro el array con los datos, para ir creando una celda por cada dato que terminaré insertando en dicha celda y ésta a la fila. Cuando acabe todo, se inserta la fila en la tabla. Todo este proceso se repetirá una y otra vez dentro del bucle determinado por $.each.

El signo de igualdad estricta (3 signos de igualdad), lo uso para comprobar que el valor de data sea igual a 1 tanto en valor como en tipo de dato, ya que el 1 también equivale al valor booleano true.

Así se vería en ejecución (con datos ficticios): http://jsbin.com/adIZEyu/1

Saludos

[satjaen]

Gracias Alexis, pero eso lo tengo que añadir a mi código o tengo que sustituir algo

[Alexis88]

Eso debe de ir en lugar de las 11 líneas en las que asignas valores a html_user, además, en lugar de $("#data tbody").html(html_user) iría $("#data tbody").append(fila), que es la última línea que puse en el ejemplo.

Saludos

[satjaen]

Iniciado por Alexis88

Eso debe de ir en lugar de las 11 líneas en las que asignas valores a html_user, además, en lugar de $("#data tbody").html(html_user) iría $("#data tbody").append(fila), que es la última línea que puse en el ejemplo.

Lo he puesto pero no me saca resultados:

Código Javascript:

function filtrar(){
 
$.ajax({
data: $("#frm_filtro").serialize()+ordenar,
type: "POST",
dataType: "json",
url: "ajax.php?action=listar",
beforeSend:function(){
$('.carga1').css('display','block');
$('.carga1').html("<img src='imagenes_menu/ajax-loader4.gif' align='center' /><br />Cargando...");
    },  
complete: function() {
 
$(".carga1").show();
$(".carga1").hide();
 
    }, 
 success: function(data){ 
 var html_user ='' ;
 if(data.length > 0){ 
 $.each(data, function(i,item){ 
 
var fila = document.createElement("tr"),
    contenido = [
                  item.id_aviso, item.telefonos, 
                  item.name + ' ' + item.apellidos, item.calle,
                  item.localidad, item.aparatos, item.marcas, item.facturacion
                ];
 
if (data === 1){
    fila.style.background = "#f00";
    fila.style.color = "#fff";
}
 
for (i = 0, limite = contenido.length; i < limite; i++){
    var columna = document.createElement("td");
    columna.innerHTML = contenido[i];
    fila.appendChild(columna);
}
 
 
 
   });
 } 
 
 
   if(html_user == '') 
    html_user = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
$("#data tbody").append(fila);
$('.carga').html('');
 

[Alexis88]

¿Qué resultado arroja? ¿Algún error?

[satjaen]

No da ningún error. No salen los datos, este es el div donde salen los datos:

Código Javascript:

<div id="usuario">
          <table width="100%" id="data">  
             <thead>
                   <tr  bgcolor=#DFEBFF>
                     <th><span title="selecc">Selecc.</span></th>
                    <th><span title="id_aviso" >Nº Aviso</span></th>
                    <th><span title="telefonos">Teléfono</span></th>
                    <th><span title="name">Nombre</span></th>
                    <th><span title="calle">Calle</span></th>
                    <th><span title="poblacion">Población</span></th>
                     <th><span title="calle">Aparato</span></th>
                    <th><span title="marca">Marca</span></th>
                    <th><span title="situacion">Situación</span></th>    
                     </tr>
                </thead>
                <tbody>
                
     <th><div id="carga1" class="carga1"></div></th>
 
                </tbody>                  
            </table> 
                </div>
 

Con este estilo:

Código CSS:

#data tr{
    
    background:#FFFFFF;
 
}
 
#data tr:hover{
    background:#DFEBFF;
}
 

[Alexis88]

Es extraño, debería funcionar como en el enlace que adjunté. Añade un alert(fila) al final del for para ver si se están formando las filas.

[satjaen]

Si el alert si va.

[Alexis88]

Entonces se está adhiriendo mal a la tabla. Inténtalo con estas formas una a una hasta que una te funcione.

Código Javascript:

("#data").append(fila); //Forma 1
document.getElementById("data").appendChild(fila); //Forma 2
$(fila).appendTo("data"); //Forma 3
 

[satjaen]

OK, he cambiado esto de posición:

Código Javascript:

$("#data tbody").append(fila);
$('.carga').html('');
 

Código Javascript:

$.each(data, function(i,item){ 
 
 
var fila = document.createElement("tr"),
    contenido = [
                  item.id_aviso, item.telefonos, 
                  item.name + ' ' + item.apellidos, item.calle,
                  item.localidad, item.aparatos, item.marcas, item.facturacion
                ];
 
if (data === 1){
    fila.style.background = "#f00";
    fila.style.color = "#fff";
}
 
for (i = 0, limite = contenido.length; i < limite; i++){
    var columna = document.createElement("td");
    columna.innerHTML = contenido[i];
    fila.appendChild(columna);
    
}
 
 
 
 $("#data tbody").append(fila);
 $('.carga').html('');
    
 
 
 
 });  
} 
 
   if(fila == '') 
    fila = '<tr><td colspan="4" align="center">No se encontraron registros..</td></tr>';
 

Y esta parte como la pongo?

Código HTML:

html_user += '<tr onclick="pulsar1(this, ' + *String.fromCharCode(39) + item.id_aviso + String.fromCharCode(39) *+ ');" ondblclick="pulsar(this, ' + String.fromCharCode(39) + item.id_aviso + String.fromCharCode(39) *+ ');" >';
html_user += '<td style="'+item.style+'"><input name="demo" type="checkbox" value="' + item.id_aviso + '"/></td>';
 

[Alexis88]

Claro, no me fijé que intentabas adherir la fila a la tabla después del bucle $.each.

Para lo segundo que preguntas, puedes añadirla a la tabla como lo hacías o puedes crear filas como te he mostrado en el ejemplo, a cada fila le aplicas los estilos que desees y les añades los input que veo que deseas añadir y, finalmente, la adhieres a la tabla.

Fe de errata:

La tercera forma que mostré para añadir la fila a la tabla es incorrecta, debería ser así:

Código Javascript:

$(fila).appendTo("#data");
 

[satjaen]

Para lo segundo que preguntas, puedes añadirla a la tabla como lo hacías o puedes crear filas como te he mostrado en el ejemplo, a cada fila le aplicas los estilos que desees y les añades los input que veo que deseas añadir y, finalmente, la adhieres a la tabla.


Por favor, me puedes explicar como hacerlo ?

[Alexis88]

De esta forma:

Código Javascript:

var nuevaFila = document.createElement("tr"),
    parametro = item.id_aviso,
    nuevaColumna = document.createElement("td"),
    nuevoCheckBox = document.createElement("input");
 
nuevaFila.addEventListener("click", function(){
  //Acciones
}, false);
nuevaFila.addEventListener("dblclick", function(){
  //Acciones
}, false);   
    
nuevaColumna.className = item.style;
nuevoCheckBox.setAttribute("type", "checkbox");
nuevoCheckbox.value = item.id_aviso;
nuevoCheckBox.name = "demo";
 
nuevaColumna.appendChild(nuevoCheckBox);
nuevaFila.appendChild(nuevaColumna);
$("#data tbody").append(nuevaFila);
 

En la parte en donde puse "acciones", debes de colocar las instrucciones que indicaste en las funciones pulsar1 y pulsar, respectivamente, esta es la forma correcta de asignar funciones a elementos que se vayan generando dinámicamente, como en este caso. Declaré una variable parametro que contiene el parámetro que originalmente pasas a cada una de dichas funciones, el objeto this se debe escribir como tal dentro del bloque de instrucciones.

Saludos

[satjaen]

Alexis con esto no cambiamos la fila de color si el item facturacion es igual a 1 no ?

if (data === 1){
fila.style.background = "#f00";
fila.style.color = "#fff";
}

[Alexis88]

Ahí data representa a cada uno de los datos devueltos por la petición asíncrona, de manera que en cada iteración de $.each, se tomará un valor diferente.

Por ejemplo, supongamos que se retornaron los valores 3, 1, 4 y 1. Esto quiere decir que habrán cuatro iteraciones, en donde se crearán 4 filas nuevas (y una más por cada una en donde va la caja de texto). En cada iteración, se evaluará cada valor retornado, por ejemplo, en las iteraciones 2 y 4, el valor es igual a 1, por lo tanto, en esas iteraciones, las filas se pintarán de rojo, mientras que en las otra iteraciones en donde el valor retornado es diferente a 1, no se pinta la fila.

Saludos

[satjaen]

Iniciado por Alexis88

Ahí data representa a cada uno de los datos devueltos por la petición asíncrona, de manera que en cada iteración de $.each, se tomará un valor diferente.

Por ejemplo, supongamos que se retornaron los valores 3, 1, 4 y 1. Esto quiere decir que habrán cuatro iteraciones, en donde se crearán 4 filas nuevas (y una más por cada una en donde va la caja de texto). En cada iteración, se evaluará cada valor retornado, por ejemplo, en las iteraciones 2 y 4, el valor es igual a 1, por lo tanto, en esas iteraciones, las filas se pintarán de rojo, mientras que en las otra iteraciones en donde el valor retornado es diferente a 1, no se pinta la fila.

Si pero el item facturacion='1' y no pinta la fila de rojo !!!!!!!!!

Gracias

[Alexis88]

En tal caso, reemplaza la condición if (data === 1) por if (item.facturacion === 1).

[satjaen]

Iniciado por Alexis88

En tal caso, reemplaza la condición if (data === 1) por if (item.facturacion === 1).

Alexi, no funciona:

Código Javascript:

$.each(data, function(i,item){ 
 
var fila = document.createElement("tr"),
 
 
    contenido = [
    
                  item.id_aviso, item.telefonos, 
                  item.name + ' ' + item.apellidos, item.calle,
                  item.localidad, item.aparatos, item.marcas, item.facturacion
                ];
 
 
for (i = 0, limite = contenido.length; i < limite; i++){
    var columna = document.createElement("td");
    columna.innerHTML = contenido[i];
    fila.appendChild(columna);
    
}
 
 
 
 
if (item.facturacion === 1){
    fila.style.background = "#f00";
    fila.style.color = "#fff";
}
 
 
 $("#data tbody").append(fila);
 $('.carga').html('');
 
 
  });
 

[Alexis88]

¿Estás seguro de que item.facturacion es la variable que debe ser igual a 1 para que la fila tome el color rojo?, si no es así, reemplázala por la variable correcta.

[satjaen]

Iniciado por Alexis88

¿Estás seguro de que item.facturacion es la variable que debe ser igual a 1 para que la fila tome el color rojo?, si no es así, reemplázala por la variable correcta.

Alexis si es la variable correcta:

Código Javascript:

[{"id_aviso":"4877","telefonos":"00000000","name":"JUAN","apellidos":"GARCIA MONEREO","calle":"CARRERA","localidad":"MADRID","aparatos":"HORNO-MICROONDAS","marcas":"INDESIT","facturacion":"1"}]
 

He puesto un alert antes y no me lo hace:

Código Javascript:

if (item.facturacion === 1){
    alert("hola");
}
 
 
if (item.facturacion === 1){
    fila.style.background = "#f00";
    fila.style.color = "#fff";
}
 

[Alexis88]

Haz un alert(item.facturacion) para ver qué resultado arroja.

[satjaen]

Gracias Alexis, pero al final lo he hecho así:

Código PHP:

while($row = mysql_fetch_array($query)) 
    { 
          
          
          
          
          if($row["facturacion"]=='1' or $row["facturacion"]=='09'){
              
          $style="background-color:red";
              
          }else{
        
         $style="#tr:hover{
         background:#DFEBFF;
        }";
              
          }
    
        $datos[] = array( 
            'id_aviso'          => $row['id_aviso'], 
            'telefonos'          => $row['telefonos'], 
            'name'      => utf8_encode($row['name']), 
            'apellidos'       => utf8_encode($row['apellidos']),
            'calle'       => utf8_encode($row['calle']),
            'localidad'        => utf8_encode($row['localidad']),
            'aparatos'        => utf8_encode($row['aparatos']),
            'marcas'        => utf8_encode($row['marcas']),
            'facturacion'        => utf8_encode($row['facturacion']),
            'style'                 => $style
            
            
            
        ); 
    }
 

Código Javascript:

$.each(data, function(i,item){ 
 
html_user += '<tr onclick="pulsar1(this, ' + *String.fromCharCode(39) + item.id_aviso + String.fromCharCode(39) *+ ');"     ondblclick="pulsar(this, ' + *String.fromCharCode(39) + item.id_aviso + String.fromCharCode(39) *+ ');" >';
html_user += '<td style="'+item.style+'"><input name="demo" type="checkbox" value="' + item.id_aviso + '"/></td>';
 html_user += '<td  style="'+item.style+'">'+item.id_aviso+'</td>';
 html_user += '<td  style="'+item.style+'">'+item.telefonos+'</td>';
 html_user += '<td  style="'+item.style+'">'+item.name+' '+item.apellidos+'</td>';
 html_user += '<td  style="'+item.style+'">'+item.calle+'</td>';
 html_user += '<td  style="'+item.style+'">'+item.localidad+'</td>';
 html_user += '<td  style="'+item.style+'">'+item.aparatos+'</td>';
 html_user += '<td  style="'+item.style+'">'+item.marcas+'</td>';
 html_user += '<td  style="'+item.style+'">'+item.facturacion+'</td>';
html_user += '</tr>';
 
 
 });
 

Como lo ves, se puede mejorar ?


Una pregunta:

Cuando ingreso el valor "1" o "09" del campo facturacion en la base de datos me lo ingresa dejando espacios después de dichos valores. Y al sacar el array me lo imprime así:

[{"facturacion":"1 (aquí es donde van los espacios en blanco) "}]

Y claro cuando quiero buscar el valor "1" me dice que no se encuentra. Entonces tengo que entrar en la base de datos y eliminar esos espacios.

Porque puede ser ?

[Alexis88]

¿Cómo guardas el dato en la BD?

[satjaen]

Iniciado por Alexis88

¿Cómo guardas el dato en la BD?

Alexis, dejalo ya parece que lo imprime bien.

Muchas gracias