0

En una tabla X se pueden dar de baja status = 0 o dar de alta status= 1, estos cambio se reflejan en otra tabla a continuación:

for(var i = 0; i < activos.length; i++)
    {

                if (activos[i].status == 0) {
                //Crea fila
                var row = document.createElement('tr');

                globalCounter++;
                var cellNum = document.createElement('td');
                cellNum.innerHTML = globalCounter;
                //Crea todas las celdas
                var CellId = document.createElement('td');
                CellId.innerHTML = activos[i].cat_name+"-"+"00"+activos[i].idSub+"-"+activos[i].numFile;

                var CellOrder = document.createElement('td');
                CellOrder.innerHTML = activos[i].id_ticket;

                var CellDescription = document.createElement('td');
                CellDescription.innerHTML = activos[i].description_item;

                var CellLocation = document.createElement('td');
                CellLocation.innerHTML = activos[i].name_location;

                var CellCant = document.createElement('td');
            CellCant.innerHTML = activos[i].quantityTicket;

            var CellDate = document.createElement('td');
            CellDate.innerHTML = activos[i].registerTicket;

            var CellStatus = document.createElement('td');

                //si es inactivo = 0 se dibuja el circulo rojo en la tabla
                var status = document.createElement('i');
                status.setAttribute("class", "fa fa-circle text-danger");
                status.setAttribute("data-toggle", "tooltip");
                status.setAttribute("data-placement", "top");
                status.setAttribute("data-html", "true");
                status.setAttribute("title", "Item inactivo.");
                CellStatus.appendChild(status);

        var CellAcciones = document.createElement('td');
        CellAcciones.style.textAlign = "center";
        var edit = document.createElement('button');
        var editImg = document.createElement('img');

            /*Crea toda la celda de editar*/
            var editImg = document.createElement('i');
            editImg.setAttribute("class", "fa fa-pencil");
            editImg.style.color="#000000";
            edit.appendChild(editImg);
            edit.className = 'btn btn-w-m btn-warning';
            edit.style.minWidth = '0px';
            edit.style.marginLeft="20px";
            edit.setAttribute("onclick", "editModal('" +
            activos[i].id_ticket + "', '" + activos[i].image +"', '" + activos[i].cat_name +"', '" +
            activos[i].idSub +"', '" + activos[i].numFile +"', '" + activos[i].description_item +"', '" +
            activos[i].quantityTicket +"', '" + activos[i].quantity +"', '" +
            activos[i].comentTicket +"', '" + activos[i].name_category +"','" +
            activos[i].name_sub +"','" + activos[i].name_location +"','" +
            activos[i].model_item +"','" + activos[i].price_Ticket +"','" + activos[i].name_unit +"','" +
            activos[i].company_supplier +"', '"+ activos[i].manufacturer +"','" +
            activos[i].commentt +"','" + activos[i].name_engineer +"','" + activos[i].registerTicket +"','" + activos[i].price_item +"','" + activos[i].unit_Ticket +"','" + activos[i].target_Stock +"','" + activos[i].quantity +"',)");
            edit.setAttribute("data-toggle", "tooltip");
            edit.setAttribute("data-placement", "top");
            edit.setAttribute("data-html", "true");
            edit.setAttribute("title", "Click para editar informacion de entrada.");
            CellAcciones.appendChild(edit);

        //Aniade toda las celdas creadas con anteriridad a la fila
    row.appendChild(cellNum);
        row.appendChild(CellId);
        row.appendChild(CellOrder);
    row.appendChild(CellDescription);
    row.appendChild(CellLocation);
        row.appendChild(CellCant);
    row.appendChild(CellDate);
    row.appendChild(CellStatus);
    row.appendChild(CellAcciones);
        //Aniade a la tabla la fila
        table.appendChild(row);
    }
}

Lo que necesito es que en aquella tabla X cuando se da de baja un item en el codigo anterior ponga en la tabla un status con color rojo, eso lo hago con status.setAttribute("class", "fa fa-circle text-danger"); pero cuando se vuelve a dar de alta quisiera que el color fuera verde de activo, pero si lo hago del lado falso de (activos[i].status == 0) como le hago para no volver a poner todo el código anterior es decir..

else 
{
   var row = document.createElement('tr');

                globalCounter++;
                var cellNum = document.createElement('td');
                cellNum.innerHTML = globalCounter;
                //Crea todas las celdas
                var CellId = document.createElement('td');
                CellId.innerHTML = activos[i].cat_name+"-"+"00"+activos[i].idSub+"-"+activos[i].numFile;
......
}

Este seria el codigo para poner el color a verde.

            var status = document.createElement('i');
            status.setAttribute("class", "fa fa-circle text-navy");
            status.setAttribute("data-toggle", "tooltip");
            status.setAttribute("data-placement", "top");
            status.setAttribute("data-html", "true");
            status.setAttribute("title", "item activo.");
2
  • Lo único que cambia entre el estado 1 y estado 0 es el atributo title? Commented el 15 ene. 2019 a las 22:52
  • title y class, eso solo dibuja un punto verde o rojo segun sea el caso, desde un principio comparo si el status es = 0 entonces en la tabla X al dar de baja algun item en esta tabla me pone el punto rojo de inactivo, cuando en la tabla X cambio el status a activo me debe poner el punto verde, pero no se como ponerlo sin repetir de nuevo todo como lo puse al inicio pero del lado falso de status =0
    – cosito
    Commented el 15 ene. 2019 a las 22:57

1 respuesta 1

0

Tenes dos opciones sencillas para solucionar tu problema, uno es el uso de una función, por ejemplo:

var elem = document.getElementById('ejemplo');

cambiarEstilo(0);

//Defino una función que recibe un parámetro
function cambiarEstilo(activo)
{   
  //Utilizando un condicional, chequeo el parámetro, y según sea el caso..
  if(activo==1)
  //Agrego la clase activo
  elem.setAttribute('class','activo');  
  else
  //Agrego la clase inactivo
  elem.setAttribute('class','inactivo');
}
.activo { color:green; }
.inactivo { color:red; }
<p id="ejemplo">I'm blue</p>


Otra opción sería la de usar el operador ternario que creo que en tu caso va a ser más aplicable

Para aplicarlo se hace de la siguiente manera

var elem = document.getElementById('ejemplo');
var estado = 1;

//En caso de que estado valga 1, la clase activo se agregará, caso contrario, la clase inactivo
elem.setAttribute('class', estado==1 ? 'activo' : 'inactivo');
.activo { color:green; }
.inactivo { color:red; }
<p id="ejemplo">Soy un ejemplo</p>

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.