Mudar cor de campo de tabela conforme valor

29 de dezembro de 2015 3 respostas Resolvido

Pacato 29 de dezembro de 2015

Pessoal,

Queria mudar a cor de uma linha (ou um campo apenas) conforme valor vindo do BD:
Por exemplo, se tiver entre 1-2 cinza, 3-4 amarelo, 5 vermelho

em jstl ou função javascript, pois sei trabalhar melhor:

Monto minha tabela assim:

<tbody>
  <c:forEach var="listaAlertas" varStatus="alerta" items="${listaAlertas}">
      <tr id="cor1">
      <td><img src="img/blink.gif"
          width="16" height="16" /></td>
      <td><c:out
          value='${listaAlertas.codNvlAlerta != "" ? listaAlertas.codNvlAlerta : "-"}' /></td>
      <td><c:out value='${listaAlertas.codAlerta}' /></td>    
      <td><c:out value='${listaAlertas.dispositivo}' /></td>

3 Respostas

MarcoBruno 29 de dez. de 2015

Pacato.

Vou colocar um exemplo abaixo com HTML e CSS. A ideia é você passar o valor pra um atributo global (data-*) e no CSS conforme o valor desse atributo aplicar um backgorund-color.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Trabalhando com seletores de atributos</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="color.css">
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Nome</th>
        <th>Idade</th>
      </tr>
    </thead>

    <tbody>
      <tr data-color="1">
        <td>Marco Bruno</td>
        <td>1</td>
      </tr>
      <tr data-color="2">
        <td>Antonio Silva</td>
        <td>2</td>
      </tr>
      <tr data-color="3">
        <td>Ricardo Souza</td>
        <td>3</td>
      </tr>
      <tr data-color="4">
        <td>Paulo Cesar</td>
        <td>4</td>
      </tr>
      <tr data-color="5">
        <td>Cesar Oliveira</td>
        <td>5</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSS

[data-color="1"],
[data-color="2"] {
  background-color: gray;
}
[data-color="3"],
[data-color="4"] {
  background-color: yellow;
}
[data-color="5"] {
  background-color: red;
}

Qualquer dúvida só falar.

Solucao aceita

Pacato 29 de dez. de 2015

Obrigado Marco…

Mas tenho que adicionar condição, fiz assim, colocando uma imagem diferente:

<fmt:parseNumber var="nvlAlerta" integerOnly="true" type="number" value="${listaAlertas.codNvlAlerta}" />
  <c:if test="${nvlAlerta <= 2}">
    <td style="border-color:white" style="border-style:groove">
      <img src="img/baixo.png"    width="16" height="16" />
    </td>
  </c:if>
  <c:if test="${nvlAlerta >= 3 && nvlAlerta <= 4}">
    <td style="border-color:white" style="border-style:groove">
      <img src="img/medio.png"    width="16" height="16" />
    </td>
  </c:if>
  <c:if test="${nvlAlerta >= 5}">
    <td style="border-color:white" style="border-style:groove">
      <img src="img/alto.gif"    width="16" height="16" />
    </td>
  </c:if>

E no javascript, onde faço uma atualização a cada x tempo:

if (parseInt(o.codNvlAlerta) <= 2){
  dados+="<td><img src='img/baixo.png' width='16' height='16' /></td>";
} else if (parseInt(o.codNvlAlerta) >= 3 && parseInt(o.codNvlAlerta) <= 4){
  dados+="<td><img src='img/medio.png' width='16' height='16' /></td>";
} else if (parseInt(o.codNvlAlerta) >= 5){
  dados+="<td><img src='img/alto.gif' width='16' height='16' /></td>";
} else {
  dados+="<td> - </td>";
}

Valeu

MarcoBruno 29 de dez. de 2015

Você pode utilizar a mesa lógica só para alterar o valor do atributo data-color. Fazendo isso o código fica um pouco mais simples e você na mistura as camadas do front-end.

CSS3 - Visual e Animações.
HTML5 - Conteúdo, marcação, semântica e estrutura dos dados.
JavaScript - Comportamento e interações.

Criado 29 de dezembro de 2015

Ultima resposta 29 de dez. de 2015

Respostas 3

Participantes 2

3 Respostas

Topicos relacionados