Conditional css (Jquery only)

Question

I’m trying to put the color inside the conditional, but I’m not getting it. PS: There are three different colors and can only be done with Jquery.

<script>
    var qtd;
    $(function () {
        $("#btn1").click(cadastrarDados);
        $("#btn2").click(exibirDados);
        if (localStorage.getItem("qtd") == null) {
            qtd = 0;
        } else {
            qtd = parseInt(localStorage.getItem("qtd"));
        }
    });
    function cadastrarDados() {
        qtd++;
        localStorage.setItem("rgm" + qtd, $("#rgm").val());
        localStorage.setItem("nome" + qtd, $("#nome").val());
        localStorage.setItem("parcial" + qtd, $("#parcial").val());
        localStorage.setItem("projeto" + qtd, $("#projeto").val());
        localStorage.setItem("regimental" + qtd, $("#regimental").val());
        localStorage.setItem("qtd", qtd);

    }
    function exibirDados() {
        if (qtd < 1) {
            alert("nada")
        } else {
            var conteudo = "<table border='1'>" + "<th>" + "Nome" + "</th>" + "<th>" + "RGM" + "</th>" + "<th>" + "Nota Parcial" + "</th>" + "<th>" + "Nota Projeto" + "</th>" + "<th>" + "Nota Regimental" + "</th>" + "<th>" + "Nota final" + "</th>" + "<th>" + "Conceito" + "</th>";
            for (var i = 1; i <= qtd; i++) {
                var notaparcial, notaprojeto, notaregimental, media;
                notaparcial = parseFloat(localStorage.getItem("parcial" + i));
                notaprojeto = parseFloat(localStorage.getItem("projeto" + i));
                notaregimental = parseFloat(localStorage.getItem("projeto" + i));
                media = notaparcial + notaprojeto + notaregimental;

                if (media >= 6) {
                    conceito = "Aprovado";
                } else if (media < 6 && media > 1) {
                    conceito = "AF";
                } else {
                    conceito = "Reprovado";
                }
                conteudo += "<tr>"
                conteudo += "<td>" + localStorage.getItem("rgm" + i) + "</td>"
                conteudo += "<td>" + localStorage.getItem("nome" + i) + "</td>"
                conteudo += "<td>" + localStorage.getItem("parcial" + i) + "</td>"
                conteudo += "<td>" + localStorage.getItem("projeto" + i) + "</td>"
                conteudo += "<td>" + localStorage.getItem("regimental" + i) + "</td>"
                conteudo += "<td>" + media + "</td>"
                conteudo += "<td>" + conceito + "</td>"
                conteudo += "</tr>"

Answer 1

See that I made a modification in the code, see this example

// Cria o elemento Table
var tabela = $('<table></table>').css({ 'border': '1px solid' });
colunas = '<thead>';
  colunas += '<th>Nome</th>';
  colunas += '<th>RGM</th>';
  colunas += '<th>Nota Parcial</th>';
  colunas += '<th>Nota Projeto</th>';
  colunas += '<th>Nota Regimental</th>';
  colunas += '<th>Nota final</th>';
  colunas += '<th>Conceito</th>';
colunas += '<thead>';
// Adiciona o conteudo html da variável 'colunas' no elemento Table criado
tabela.append(colunas);

var media = 0;
// Apenas para exemplo
for(i=0; i<3; i++){
  // Cria o elemento do tipo 'tr'
  var linha = $('<tr></tr>');
  // Cada variável aqui, representa uma coluna
  // $('<td></td>') cria o elemento, logo em seguida adiciona o texto.
  var nome = $('<td></td>').text('Nome');
  var rgm = $('<td></td>').text('RGM');
  var notaParcial = $('<td></td>').text('Nota Parcial');
  var notaProjeto = $('<td></td>').text('Nota Projeto');
  var notaRegimental = $('<td></td>').text('Nota Regimental');
  var notaFinal = $('<td></td>').text('Nota final');
  
  // Verifica a média
  if (media >= 6) {
    cor = 'green';
  } else if (media < 6 && media > 1) {
    cor = 'gray';
  } else {
    cor = 'red';
  }
  // Cria a coluna 'Conceito'
  // $('<td></td>') cria o elemento, logo em seguida adiciona o texto
  // e aplica o estilo.
  var conceito = $('<td></td>').text('Conceito').css({ 'color': cor });
  // Adiciona as colunas na linha
  linha.append(nome, rgm, notaParcial, notaProjeto, notaRegimental, notaFinal, conceito);
  // Adiciona a linha na tabela
  tabela.append(linha);
}

// Adiciona na pagina
$('#tabela').append(tabela);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabela"></div>

In order for the created table to be added to the page, you must create an element, example:

<div id="tabela"></div>

jQuery References

• append
• css
• text