Exchange table TD according to received value

Asked

Viewed 426 times

1

I need my TD background to change according to the value it gets from Listview coming from a query.

inserir a descrição da imagem aqui

<script type="text/javascript" > 

$(function () {                     

    var texto = $("#ListaSchedulesRdc td:nth-child(4)").text();

    var resultado = (texto);

    //alert(resultado);


    for (resultado in "#ListaSchedulesRdc") {


        if (resultado > 1) {

            $("#ListaSchedulesRdc td:nth-child(4)").css("background-image", "url(../Imagens/alerta-vermelho.png)", "background-repeat: no-repeat;", "class='alerta-vermelho'");
        }

        if (resultado = 1) {

            $("#ListaSchedulesRdc td:nth-child(4)").css("background-image", "url(../Imagens/alerta-amarelo.png)", "background-repeat: no-repeat;", "class='alerta-amarelo'");
        }

        if (resultado = 0) {

            $("#ListaSchedulesRdc td:nth-child(4)").css("background-image", "url(../Imagens/alerta-verde.png)", "background-repeat: no-repeat;", "class='alerta-verde'");
        }

    }

    });


 <asp:ListView ID="ListaSchedulesRdc" runat="server" GroupPlaceholderID="groupPlaceHolder1"  ItemPlaceholderID="itemPlaceHolder1" >  

          <LayoutTemplate>  



            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <table border ="1" ID="ListaSchedulesRdc">  
                <tr id="ListaSchedulesRdcTr">  
                    <th>Nome              </th>  
                    <th>Ultima Rodada     </th>  
                    <th>Proxima Rodada    </th>  
                    <th>Ultimo Resultado  </th>  
                    <th>Quantidade Erros  </th>  
                    <th>Estado            </th>  
                </tr>  
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>  

            </table>  



        </LayoutTemplate>  
        <GroupTemplate>  
            <tr>  
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>  
            </tr>  
        </GroupTemplate>  



        <ItemTemplate>  


            <td><%# Eval("NomeTask")            %> </td>  
            <td><%# Eval("UltimaRodadaTask")   %> </td>  
            <td><%# Eval("ProximaRodadtaTask") %> </td>  
            <td id="ListaSchedulesRdcTd"><%# Eval("ResultadoTask")      %> </td>
            <td><%# Eval("ErrosTask")          %> </td>
            <td><%# Eval("EstadoTask")          %> </td>
        </ItemTemplate>  
    </asp:ListView>
javascript jquery

  • In the status column?

  • Leandro, in the column Last Result, as well as in my image that is yellow, but should be in agreement with the If’s Javascript;

  • ah, you want to do by js, could put directly in your Itemtemplate and already render with the expected result, put together your question the html of the rendered table too, only the image does not help either.

2 answers

0


You’re getting the wrong amount on:

var texto = $("#ListaSchedulesRdc td:nth-child(4)").text();

This way, you are returning the values of the entire column.

Plus your code has many problems, such as wrong comparison operators in ifs.

You can make a loop running through all the lines taking the value of each fourth cell td and apply the backgrounds you want according to the value of each.

See working, as an example, below:

$('#ListaSchedulesRdc tr td:nth-child(4)').each(function(e,v){

   var resultado = $(v).text();

   if (resultado > 0) {
      $(this).css("background", "blue");
   }

   if (resultado == 1) {
      $(this).css("background", "red");
   }

   if (resultado == 0) {
      $(this).css("background", "yellow");
   }
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" cellpadding="5" bgcolor="#ddd" id="ListaSchedulesRdc">
   <tr>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         20
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
   </tr>
   <tr>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         30
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
   </tr>
   <tr>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
   </tr>
   <tr>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
      <td>
         0
      </td>
      <td>
         1
      </td>
      <td>
         1
      </td>
   </tr>
</table>

0

My friend, I have no words to thank you.

I had to make some adaptations and it worked.

I was unable to do 'Foreach' on JS and confused some comparison operators.

Thank you very, very much!

inserir a descrição da imagem aqui

Browser other questions tagged javascript jquery

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