0

Estoy recibiendo una cadena de json, y la estoy mostrando en una tabla que viene desde jquery. ¿Mi problema? Deseo añadir un condicional en list.clase que, en caso de ser consumidor, sea de un color. Distribuidor otro, etc. Gracias de antemano por la ayuda prestada.

Les presento el código:

$(function(){
$.ajax({
    url: "/edit/mostrar",
    success: function(data){
        var valor = '';
        data.user.forEach(list => {
        var clase = 
        valor += "<tr>"+
         "<td>" + list.idusuario + "</td>"+
         "<td>" + list.nombre  + " " + list.apellido + "</td>"+
         "<td>" + list.idpais + "</td>"+ 
         "<td> <i class='icon-envelop2 position-left'></i> " + list.email + "</td>" +
         "<td> <span class='badge badge-warning'>" + list.clase + "</span></td>" +
         "<td>" + list.idpatrocinador + "</td>"+
         "<td><button type='button' class='btn btn-warning btn-sm' id='id_usuario' onclick='enviarid(" + list.idusuario + ")' ><i class='icon-pencil5 position-left'></i>Editar</button></td>" + "<tr>";
      })
      $("#tabla_body").html(valor);   
    },
    dataType: "json"
}); });
5
  • Si puedes especificar un poco mejor que es lo que deseas podemos responderte de acorde a lo que en realidad quieres hacer. Según entendí despues de leer varias veces quieres cambiar el color del span donde muestras la clase según el valor que tome. Es eso?? Commented el 27 mar. 2018 a las 18:41
  • Jaja, disculpa, me pasa a menudo. Y sí, deseo que si: List.clase=consumidor, cambie la class del span a ejemplo, rojo. Si es distribuidor, a otro color. Commented el 27 mar. 2018 a las 18:45
  • list.clase te devuelve un string 'consumidor' y 'distribuidor' ? Commented el 27 mar. 2018 a las 18:45
  • Devuelve 4 valores: distribuidor, consumidor, guest y personal. Commented el 27 mar. 2018 a las 18:47
  • lo que has puesto adicional como comentarios lo puedes poner en la pregunta, haciendo click en editar, los comentarios tienden a desaparecer en el futuro
    – Rene Limon
    Commented el 27 mar. 2018 a las 19:13

2 respuestas 2

2

Lo que podrias hacer es imprimir el valor de list.clase como clase del span:

"<span class='badge badge-warning "+ list.clase +"'>" + list.clase + "</span>"

y definir estilos en el css de tal forma que cambie de color dependiendo el valor de list.clase:

span.consumidor{
   color: red;
}
span.distribuidor{
   color: green;
}
/* .... y asi sucesivamente para cada valor */
3
  • Muchas gracias, me funcionó tu idea. Te envío un beso virtual. Commented el 27 mar. 2018 a las 19:30
  • jejeje, pondré mi mejilla virtual
    – Rene Limon
    Commented el 27 mar. 2018 a las 19:33
  • Jajaja, lo enviaré vía correo eléctronico <3 Commented el 27 mar. 2018 a las 20:17
0

Puedes hacer varias cosas:

  1. Declarar varias clases de css que se adapten a lo que deseas y luego asignarle esa clase a tu span.
  2. Declarar los colores en un objeto directamente y asignarselo al span.

En este ejemplo hice el 2do si deseas puedo hacer el 1. Pero por sencillez este es más práctico

$(function(){
    var colors = {
      distribuidor: 'red',
      consumidor: 'blue',
      personal: 'green',
      guest: 'yellow'
    };
    $.ajax({
        url: "/edit/mostrar",
        success: function(data){
            var valor = '';
            data.user.forEach(list => {
            var clase = 
            valor += "<tr>"+
             "<td>" + list.idusuario + "</td>"+
             "<td>" + list.nombre  + " " + list.apellido + "</td>"+
             "<td>" + list.idpais + "</td>"+ 
             "<td> <i class='icon-envelop2 position-left'></i> " + list.email + "</td>" +
             "<td> <span class='badge badge-warning' style='background-color: '"+colors[list.clase]+">" + list.clase + "</span></td>" +
             "<td>" + list.idpatrocinador + "</td>"+
             "<td><button type='button' class='btn btn-warning btn-sm' id='id_usuario' onclick='enviarid(" + list.idusuario + ")' ><i class='icon-pencil5 position-left'></i>Editar</button></td>" + "<tr>";
          })
          $("#tabla_body").html(valor);   
        },
        dataType: "json"
    });
});

La variable colors contiene los colores que vas a asignarle al span según el valor de la clase, puedes usar el código hexadecimal para los colores. Cómo los colores guardan relación con las clases que quieres condicionar, no necesito hacer un if, con solo decir colors['consumidor'] el encuentra ese elemento en el objeto colors y devuelve su color. Espero que soluciones con esto

2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.