Home / Questions / 443011
Accepted
cosito
Asked: 2022-04-10 09:32:47 +0800 CST 2022-04-10 09:32:47 +0800 CST

Put color circle depending on result in table | javascript

  • 772

I am filling a table by js, this is my code:

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

The data I receive from estatusis a falseor a true. I need that instead of the phrase appearing ; when it is false put a green circle and when it is true, put a red one. I have this part of the code:

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

Where would I have to put the condition to know the result, and how to integrate that in my tdfor estatus?

javascript

2 Answers

  1. Important:

    This post uses jQuery , Bootstrap and Font Awesome , because the question is based on these technologies. However, for the case of JavaScript, an example will be given using jQuery and another with pure JavaScript .

    Starting from the following concern, I quote:

    The data I receive from estatusis a falseor a true. I need that instead of the phrase appearing ; when it is falseput a green circle and when it is true, it is a red one . I have this part of code:

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

    It could be achieved by creating a function:

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

    That returns text-success(green) as a default value, while if it estatusis it truewill be text-danger(red) the resulting value.

    Once the above function has been defined, it could be implemented in the following snippet:

    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>

    Namely:

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

    Therefore, if it this.estatusis truethe function will return text-danger:

    colorSchema(true); // text-danger

    On the other hand:

    colorSchema(false); // text-success

    Provoking the result observed in the previous Snippet .

    native javascript

    We could have the same results with Native JavaScript that will be explained later in a comparative table.

    Native JavaScript Snippet:

    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>

    Comparison table

    The differences between the code written with jQuery and native JavaScript can be seen in the following comparison table:

    with jquery With native JavaScript What are you doing?
    $(lista).each(function() {}); lista.forEach((item) => {}); Iterates the object arraylista , , or put another way: walk through it.
    $('#table').append('<p>Algún texto</p>') table.insertAdjacentHTML('beforeend', '<p>Algún texto</p>')) Insert HTML elements as strings ( string ).

    Note that the idea of ​​the function is to make it easier to read and implement the color scheme with it. So you can implement the color scheme without using it, but it becomes less scalable that way.

    References

    To learn more about the methods used, see the following references:

    • 1
  2. Best Answer

    try this and see how it goes

    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>"
);
    • 0