Pacato
Dezembro 29, 2015, 4:05pm
#1
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>
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.
Pacato
Dezembro 29, 2015, 6:40pm
#3
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
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.