How to streamline the color of a text in a cell of an HTML table, using Javascript

Asked

Viewed 48 times

-1

    $(function() { 
        var texto =  $("#question_list tr:nth-child(1) td:nth-child(4)").text();            
        var result = (texto);
                            
        if (result=="Respondido"){
            $("#answers").css("background","#FF0000");
        }else if(result=="Arquivado"){
            $("#answers").css("background","#00FF00");
        }else if(result=="Em Análise"){
            $("#answers").css("color","#0000FF");
        }else if(result=="Aguardando Resposta"){
            $("#answers").css("color","#0000FF");
        }else{
            $("#answers").css("color","#000000");
                }   
        })
 <table id="question_list">     
        <thead>
          <tr>
            <th>Título</th>
            <th>Status</th>
          </tr>
        </thead>

        <tbody>

              <tr>
                <td>Teste Arquivo</td>
                <td id="answers">Aguardando Resposta</td>
              </tr>

              <tr>
                <td>Teste com upload de arquivo</td>
                <td id="answers">Aguardando Resposta</td>
              </tr>

              <tr>
                <td>Teste com upload de arquivo</td>
                <td id="answers">Aguardando Resposta</td>
              </tr>

              <tr>
                <td>Teste com Visualização de Arquivos</td>
                <td id="answers">Aguardando Resposta</td>
              </tr>

              <tr>
                <td>Teste para visualizar arquivo em anexo</td>
                <td id="answers">Aguardando Resposta</td>
              </tr>
       
      </tbody>

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

imagem da tabela

The texts in will undergo changes as it is in the JS code can be one of these values. The code however causes only the first row of the table to display the coloring of the text. How do I make the same happen to the other rows of the table?

javascript html css

  • Your lines only have 2 Tds each, so td:nth-child(4) finds nothing.

  • Hello, actually it would have to be td:Nth-Child(2), but the result is the same, changes the text of the td in the first line and the others not, as it appears in the image. I suspect this should be inserted into a loop for, but do not know how to do it from the above code.

1 answer

-1

I didn’t understand it very well but I think you wanted the text to be all blue, was that it? Run the example down if that’s what you wanted.

EDIT:

Corrected as per your reply. Loop the elements inside the table and change the color depending on the text.

$("#question_list tr td:nth-child(2)").each(function(index, value)
 {

  var texto = $(this).text();

  if (texto == "Respondido") {
    $(this).css("background", "#FF0000");
  } else if (texto == "Arquivado") {
    $(this).css("background", "#00FF00");
  } else if (texto == "Em Análise") {
    $(this).css("color", "#0000FF");
  } else if (texto == "Aguardando Resposta") {
    $(this).css("color", "#0000FF");
  } else {
    $(this).css("color", "#000000");
  }


 });
<table id="question_list">
  <thead>
    <tr>
      <th>Título</th>
      <th>Status</th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>Teste Arquivo</td>
      <td id="answers">Aguardando Resposta</td>
    </tr>

    <tr>
      <td>Teste com upload de arquivo</td>
      <td id="answers">Respondido</td>
    </tr>

    <tr>
      <td>Teste com upload de arquivo</td>
      <td id="answers">Arquivado</td>
    </tr>

    <tr>
      <td>Teste com Visualização de Arquivos</td>
      <td id="answers">Em Análise</td>
    </tr>

    <tr>
      <td>Teste para visualizar arquivo em anexo</td>
      <td id="answers">Aguardando Resposta</td>
    </tr>

  </tbody>

</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  • I would like the text of the column (td) to change color with each change. Ex.: If Waiting Answer = Blue, If Answered = Green... The above code is working, however, if the table has 5 lines, only the first one suffers changes according to the code and the others do not. As it is in the image, the "Waiting Reply" is blue only in the first line.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.