Change table TD according to received value

Question

Change table TD according to received value

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I need the background of my TD to change according to the value it receives from the ListView coming from a query.

<scripttype="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><tableborder="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

asked by anonymous 08.12.2017 / 19:42

2 answers

0

My friend, I have no words to thank you.

I needed to make some adjustments and it worked.

I was not able to do 'ForEach' in JS and confused some comparison operators.

Thank you so much!

09.12.2017 / 13:55

Remove input file calculate values of inputs with the same class

score 0 · Accepted Answer

You're getting the wrong value at:

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

In this way, you are returning the values of the entire column.

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

You can do a loop by traversing all lines by taking the value of each fourth cell td and applying 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><tablewidth="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>