asked on

Could you point how to change the background color based on a column value?

Hi Experts

Could you point how to change the background color based on a column value?

Accordingly to:

The background color of the line must be changed to green if the column "Situação" has the value "Ativo"

<div class="container">
    <div class="row">
    <br>
    <div class="col-md-12">
        <a href="http://<?php echo APP_HOST; ?>/produto/cadastro" class="btn btn-success btn-sm">Adicionar</a>
        <hr>
    </div>
    <div class="col-md-12">
        <?php if($Sessao::retornaMensagem()){ ?>
            <div class="alert alert-warning" role="alert">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <?php echo $Sessao::retornaMensagem(); ?>
            </div>
        <?php } ?>

        <?php
            if(!count($viewVar['listaProdutos'])){
        ?>
            <div class="alert alert-info" role="alert">Nenhum produto encontrado</div>
        <?php
            } else {
        ?>
            
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <tr>
                        <td class="info">Nome</td>
                        <td class="info">Descrição</td>
                        <td class="info">Data de Início</td>
                        <td class="info">Data de Fim</td>
                        <td class="info">Status</td>
                        <td class="info">Situação</td>
                        <td class="info"></td>
                    </tr>
                    <?php
                        foreach($viewVar['listaProdutos'] as $produto) {
                    ?>
                    
                        <!--td class="status_info"-->
                            <tr>
                                <td><?php echo $produto->getNome(); ?></td>
                            
                                <td><?php echo $produto->getDescricao(); ?></td>
                                <td><?php echo $produto->getDataInicio(); ?></td>
                                <td><?php echo $produto->getDataFim(); ?></td>
                                
                                <td><?php echo $produto->getIdStatus_literal(); ?></td>
                                <td><?php echo $produto->getIdSituacao_literal(); ?></td>
                            
                                <td>
                                    <a href="http://<?php echo APP_HOST; ?>/produto/edicao/<?php echo $produto->getId(); ?>" class="btn btn-info btn-sm">Editar</a>
                                    <a href="http://<?php echo APP_HOST; ?>/produto/exclusao/<?php echo $produto->getId(); ?>" class="btn btn-danger btn-sm">Excluir</a>
                                </td>
                            </tr>
                        <!--/td-->
                        
                    <?php
                        }
                    ?>
                </table>
            </div>
        <?php
            }
        ?>
    </div>
</div>
</div>

Open in new window

<script>
$(document).ready(function(){
    $(".???").css("color","green");
});
</script>

Open in new window

Thanks in advance

Leonidas Dosas

$('.table').on('load',function(){
  $("tr").each(function(){
    var val=$(this).find('td').eq(6).val();
    if(val==='something'){
       $(this).css('background-color', 'yellow');
    }
  });
});

Open in new window

Eduardo Fuerte

ASKER

Hi

By using your code

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

<script>

$(document).ready(function(){

    console.log('teste');

    $('.table').on('load',function(){
      
	  // Doesn't enter here
      console.log('XXX');
      
      
      $("tr").each(function(){
        var valor=$(this).find('td').eq(6).val();
        
        console.log(valor);
    
        if(val==='Ativo'){
           $(this).css('background-color', 'yellow');
        }
      });
    });

});
</script>

Open in new window

The event is not fired as expected

Could you check?

SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Leonidas Dosas

$(document).ready(function(){

    console.log('teste');
  
 $("tr").each(function(){
        var valor=$(this).find('td').eq(5).text();
        
        console.log(valor);
    
        if(val==='Ativo'){
           $(this).css('background-color', 'yellow');
        }
      });
  
   

});

Open in new window

Jaspreet Dhiman

Try this row inside the forloop

<tr <?php if($produto->getIdSituacao_literal() == "Ativo"){ echo 'style = "background-color:#7FFF00"';}; ?> >
<td><?php echo $produto->getNome(); ?></td>

<td><?php echo $produto->getDescricao(); ?></td>
<td><?php echo $produto->getDataInicio(); ?></td>
<td><?php echo $produto->getDataFim(); ?></td>

<td><?php echo $produto->getIdStatus_literal(); ?></td>
<td><?php echo $produto->getIdSituacao_literal(); ?></td>

<td>
<a href="http://<?php echo APP_HOST; ?>/produto/edicao/<?php echo $produto->getId(); ?>" class="btn btn-info btn-sm">Editar</a>
<a href="http://<?php echo APP_HOST; ?>/produto/exclusao/<?php echo $produto->getId(); ?>" class="btn btn-danger btn-sm">Excluir</a>
</td>
</tr>

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Eduardo Fuerte

ASKER

Perfect,
Thank you for the help!