1

Estoy llenando una tabla por js, este es mi codigo:

$('#table').append(//recorremos la lista llenando la tabla
    '<tr>' +
    '  <td>' + lista[i].nombre + '</td>' +
    '  <td>' + lista[i].estatus + '</td>' +
    '</tr>'
);

El dato que recibo de estatus es un false o un true. Necesito, que en vez de que aparezca la frase; cuando sea false poner un círculo verde y cuando sea true, sea uno rojo. Tengo esta parte del código:

"class", "fa fa-circle text-danger"

¿Dónde tendría que poner la condición para saber el resultado?, y ¿cómo integrar eso en mi td para estatus?

1
  • Hay varias posibilidades, entre ellas utilizarlo como nombre de clase: <td class=status-"+lista[i].estatus+"></td> Entonces puedes crear los círculos en CSS dependiende de si la celda td` tiene clase status-true o status-false. También puedes poner la condicion en el contenido de la celda para mostrar X en lugar de lista[1].false… o puedes poner una función que lo haga a posteriori.
    – Sokkian
    el 9 abr. 2021 a las 17:39

2 respuestas 2

1

Importante:

Esta publicación utiliza jQuery, Bootstrap y Font Awesome, porque la pregunta está basada en estas tecnologías. Sin embargo, para el caso de JavaScript se dará un ejemplo utilizando jQuery y otro con JavaScript puro.

Partiendo de la siguiente inquietud, cito:

El dato que recibo de estatus es un false o un true. Necesito, que en vez de que aparezca la frase; cuando sea false poner un circulo verde y cuando sea true, sea uno rojo. Tengo esta parte de código:

"class", "fa fa-circle text-danger";

Se podría conseguir creando una función:

const colorSchema = (estatus) => {
  if (estatus) return "text-danger";
  return "text-success";
};

Que devuelva text-success (verde) como valor predeterminado, mientras que si estatus es true será text-danger (rojo) el valor resultante.

Una vez que se ha definido la función anterior se podría implementar en el siguiente fragmento:

const lista = [
  { nombre: "Un nombre", estatus: false },
  { nombre: "Un segundo nombre", estatus: true },
  { nombre: "Tercer nombre", estatus: false }
];

// Esta función cambiará el color de los círculos
// en función de si estatus es «true» o no:
const colorSchema = (estatus) => {
  if (estatus) return "text-danger";
  return "text-success";
};

$(lista).each(function() {
  $('#table').append(
    '<tr>' +
    '  <td>' + this.nombre + '</td>' +
    `  <td><i class="fa fa-circle ${colorSchema(this.estatus)}"></i></td>` +
    '</tr>'
  );
});
table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  padding: 5px;
  border: 1px solid silver;
}

tr td:last-child {
  text-align: center;
}
<!-- Bibliotecas externas -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- Tabla sobre la que se trabaja -->
<table id="table"></table>

Es decir:

`<td><i class="fa fa-circle ${colorSchema(this.estatus)}"></i></td>`;

Por lo tanto, si this.estatus es true la función devolverá text-danger:

colorSchema(true); // text-danger

De lo contario:

colorSchema(false); // text-success

Provocando el resultado observado en el Snippet anterior.

JavaScript nativo

Podríamos tener los mismos resultados con JavaScript Nativo que será explicado, más adelante, en una tabla comparativa.

Fragmento JavaScript Nativo:

const lista = [
  { nombre: "Un nombre", estatus: false },
  { nombre: "Un segundo nombre", estatus: true },
  { nombre: "Tercer nombre", estatus: false }
];

// Esta función cambiará el color de los círculos
// en función de si estatus es «true» o no:
const colorSchema = (estatus) => {
  if (estatus) return "text-danger";
  return "text-success";
};

const table = document.querySelector("#table");


if (table)
  lista.forEach((item) => {
    table.insertAdjacentHTML('beforeend',
      '<tr>' +
      '  <td>' + item.nombre + '</td>' +
      `  <td><i class="fa fa-circle ${colorSchema(item.estatus)}"></i></td>` +
      '</tr>'
    );
  });
table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  padding: 5px;
  border: 1px solid silver;
}

tr td:last-child {
  text-align: center;
}
<!-- Bibliotecas externas -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- Tabla sobre la que se trabaja -->
<table id="table"></table>

Tabla comparativa

Las diferencias que hay en el código escrito con jQuery y JavaScript nativo se pueden observar en la siguiente tabla comparativa:

Con jQuery Con JavaScript nativo ¿Qué hace?
$(lista).each(function() {}); lista.forEach((item) => {}); Itera el array de objeto, lista, o dicho de otra forma: recorrerlo.
$('#table').append('<p>Algún texto</p>') table.insertAdjacentHTML('beforeend', '<p>Algún texto</p>')) Insertar elementos HTML como cadenas (string).

Note que la idea de la función es facilitar la lectura e implementación del esquema de color con él . Por lo tanto, puede implementar el esquema de color sin utilizarla, pero se hace menos escalable de esa manera.

Referencias

Para saber más sobre los métodos utilizados, consulte las siguientes referencias:

1
  • Esta publicación va a recibir mejoras progresivamente. el 10 abr. 2021 a las 23:32
0

Intenta esto a ver cómo te va

if (lista[i].estatus) {
  estado = '<i class="fa fa-circle" style="font-size:48px;color:green"></i>';
} else {
  estado = '<i class="fa fa-circle" style="font-size:48px;color:red"></i>';
}

$("#table").append(
  // Recorremos la lista llenando la tabla
  "<tr>" +
    "<td>" + lista[i].nombre + "</td>" +
    "<td>" + estado + "</td>" +
  "</tr>"
);
1
  • ya lo aplique, pero no me aparece nada en mi celda de la tabla
    – cosito
    el 9 abr. 2021 a las 19:52

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.