1

Preciso que o background da minha TD altere de acordo com o valor que ela recebe do ListView vindo de uma consulta.

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> 
3
  • Na coluna estado? Commented 8/12/2017 às 19:50
  • Leandro, na coluna Ultimo Resultado, assim como na minha imagem que está amarelo, mas deveria estar de acordo com os If's do JavaScript; Commented 8/12/2017 às 19:56
  • ah, você quer fazer por js, poderia colocar diretamente no seu ItemTemplate e já renderizar com o resultado esperado, posta junto a sua pergunta o html da tabela renderizada também, só a imagem não ajuda tanto. Commented 8/12/2017 às 19:58

2 Respostas 2

0

Você está pegando o valor errado em:

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

Desta forma, está retornando os valores da coluna inteira.

Além de que seu código possui muitos problemas, como operadores de comparação errados nos ifs.

Você pode fazer um loop percorrendo todas as linhas pegando o valor de cada quarta célula td e aplicar os backgrounds que deseja de acordo com o valor de cada uma.

Veja funcionando, como exemplo, abaixo:

$('#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

Meu amigo, não tenho palavras para lhe agradecer.

Precisei fazer algumas adaptações e funcionou.

Não estava conseguindo fazer o 'ForEach' no JS e confundi alguns operadores de comparação.

Muito, muito obrigado!

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .