Alterar style das TD

rdpacato · Novembro 10, 2014

Pessoal,

tenho uma tabela, e queria que quando viesse o valor "X" eu deixasse uma cor, quando vier o valor "Y" coloco outra cor...

É que estou com sort.table, e é uma lisat de viagens, então tem inicio e fim, então nesse período quero colocar cor diferente para cada viagem, para visualizar melhor:

exemplo:

valor de inicio (coloca uma cor)

viagem

final da viagem (termina essa cor)

valor de inicio da outra viagem (coloca outra cor)....

Essas são as classes do sort table:

.sortable .evenrow td {text-align:center;}

.sortable .oddrow td {text-align:center;}

.sortable td.evenselected {}

.sortable td.oddselected {}

				<c:forEach var="resultado" items="${resultados}">
					<tr class="resultado">
 							<td><c:out value='${resultado.dtHoraDispositivo != " " ? resultado.dtHoraDispositivo : "-"}'/></td>
							<td><c:out value='${resultado.ultMensagem != " " ? resultado.ultMensagem : "-"}'/></td>
							<td><c:out value='${resultado.velocidadeInst != " " ? resultado.velocidadeInst : "-"}'/></td>
							<td><c:out value='${resultado.rotMotor != " " ? resultado.rotMotor : "-"}'/></td>
							<td><c:out value='${resultado.nvlCombus != " " ? resultado.nvlCombus : "-"}'/></td>
							<td><c:out value='${resultado.consInsCombus != " " ? resultado.consInsCombus : "-"}'/></td>
							<td><c:out value='${resultado.distPerc != " " ? resultado.distPerc : "-"}'/></td>
							<td><c:out value='${resultado.tempViagem != " " ? resultado.tempViagem : "-"}'/></td>
							<td><c:out value='${resultado.consMedCombus != " " ? resultado.consMedCombus : "-"}'/></td>
							<td><c:out value='${resultado.codDispositivo != " " ? resultado.codDispositivo : "-"}'/></td>
							<td><c:out value='${resultado.latitude != " " ? resultado.latitude : "-"}'/></td>
							<td><c:out value='${resultado.longitude != " " ? resultado.longitude : "-"}'/></td>
					</tr>	
				</c:forEach>

ExtremsX · Novembro 10, 2014

você não poderia fazer simplesmente:

<td style="<c:out value='${resultado.valor == "Y" ? "coraqui" : "outracoraqui"}'"/>

rdpacato · Novembro 10, 2014

não conheço essa sintaxe... vc poderia me dar um exemplo?

ExtremsX · Novembro 10, 2014

Você ta alterando o sistema sem conhecer a sintaxe usada? Não tenho certeza, mas acho que isso ai é Java (JSP, ou algo assim) e não javascript

rdpacato · Novembro 10, 2014

Não ExtremsX, o que estou fazendo de boa é JSTL... eu entendo... mas estou falando de alterar o estilo da linha da coluna...

a minha ideia é que para cada viagem, tenha uma cor diferente nas linhas... pensei em algo como usar um if na mensagem (quando der mensagem final ela mudar em javascript para outra cor)... mas não sei bem onde começar

ExtremsX · Novembro 10, 2014

O que eu fiz, foi usar o JSTL para imprimir o estilo desejado

rdpacato · Novembro 11, 2014

Entendi, é que nunca usei para estilos... vc tem algum exemplo? é que não sei a sintaxe... se vc tiver algum eu agradeço

ExtremsX · Novembro 11, 2014

o exemplo que dei no post #2 já pode ser usado, é só trocar os valores e a condição para seu caso:

${resultado.valor == "Y" ? "coraqui" : "outracoraqui"}

${resultado.valor == "Y" ? "color: black" : "color: red"}

rdpacato · Novembro 12, 2014

deu este erro:

The attribute prefix color does not correspond to any imported tag library

Achei esse site, mas não consegui adaptar... estou vendo aqui ainda

http://stackoverflow.com/questions/5833088/how-do-i-change-a-specific-tds-background-color-on-click-with-javascript-jquery

ExtremsX · Novembro 12, 2014

manda como ta seu codigo

rdpacato · Novembro 12, 2014

Consegui fazer assim:

var changeStyle = function (element) {
    element.style.backgroundColor = 'red';
}

function mudarCorTD(){
	var td = document.getElementsByTagName('td');
	for (var i = 0, length = td.length; i < length; i++) {
		changeStyle(td[i]);
	}
}

Na tabela faço:

<c:if test="${resultado.ultMensagem == 'GTIGN'}">
	<script language="JavaScript">  
		mudarCorTD();
	</script>  
</c:if>

Só que estou com um probleminha:

1º precisava identificar a tabela exata (pois tenho mais de uma no código)

2º mudar a cor cada vez que chegar em uma mensagem dessa do IF (pois vem vários dessa mensagem, e cada vez que passar por ele, mudar para uma cor diferente...)

Na verdade esse esta para TD e preciso para TR :(

As cores mudando fiz assim: MAS está em TD

var cor = 1;
var changeStyle = function (element) {
	if (cor == 1){
		element.style.backgroundColor = 'red';
		cor = 2;
	} else {
		element.style.backgroundColor = 'gray';
		cor = 1;
	}	
}
function mudarCorTD(){
	var td = document.getElementsByTagName('td');
	for (var i = 0, length = td.length; i < length; i++) {
		changeStyle(td[i]);
	}
}

ExtremsX · Novembro 12, 2014

Você não pode usar jQuery não?

rdpacato · Novembro 12, 2014

é que se com javascript já estou apanhando com jquery.. rsrsrs...

não manjo praticamente nada de jquery

ExtremsX · Novembro 12, 2014

Cara, na boa, jquery é muito mais fácil, pode crer

rdpacato · Novembro 12, 2014

se tiver algum exemplo... estou ficando perdendo os cabelos com isso ...

peguei esse modo que seta a cor em duas tabelas.. funciona...

var cor = 1;
function mudarCor() {
	alert(cor);
	if (cor == 1){
		$("#tableMed tr:even").css("background-color", "#bbbbff");
		$("#tableMed tr:odd").css("background-color", "#bbbbff");
		cor = 2;
	} else {
		$("#tableMed tr:even").css("background-color", "#000");
		$("#tableMed tr:odd").css("background-color", "#000");
		cor = 1;
	}

};

O Problema é que ele fica trocando todas, e não apenas aquelas do momento... pq a lista da table vai sendo carregada... então ele altera todas de uma vez

ExtremsX · Novembro 12, 2014

o que diferencia ao do momento, para as das outras?

rdpacato · Novembro 13, 2014

é que deste jeito, ele envia o comando para todas, então a cor fica sobrescrevendo...

Eu fiz assim:

.cor1 td{background:#ecf2f6; margin:0 auto 15px; padding:5px 5px 5px 5px; font-size:10px; text-align:center; border-bottom:1px solid #c6d5e1; border-right:1px solid #c6d5e1}
.cor2 td{background:#c6d5e1; margin:0 auto 15px; padding:5px 5px 5px 5px; font-size:10px; text-align:center; border-bottom:1px solid #c6d5e1; border-right:1px solid #c6d5e1}

Ai defino assim:

			<tbody>
			<c:forEach var="resultado" items="${resultados}">
 				<c:choose>
    				<c:when test="${cor == '1'}">
						<tr class="cor1">
	 						<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.dtHoraDispositivo != " " ? resultado.dtHoraDispositivo : "-"}'/></td>
	 						<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.codDispositivo != " " ? resultado.codDispositivo : "-"}'/></td>
							<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.ultMensagem != " " ? resultado.ultMensagem : "-"}'/></td>
							<c:if test="${velocidadeInst == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.velocidadeInst != " " ? resultado.velocidadeInst : "-"}'/></td>
							</c:if>
							<c:if test="${rotMotor == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.rotMotor != " " ? resultado.rotMotor : "-"}'/></td>
							</c:if>
							<c:if test="${nvlCombus == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.nvlCombus != " " ? resultado.nvlCombus : "-"}'/></td>
							</c:if>
							<c:if test="${consInsCombus == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.consInsCombus != " " && resultado.consInsCombus != "Inf" ? resultado.consInsCombus : "-"}'/></td>
							</c:if>
							<c:if test="${distPerc == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.distPerc != " " ? resultado.distPerc : "-"}'/></td>
							</c:if>
							<c:if test="${tempViagem == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.tempViagem != " " ? resultado.tempViagem : "-"}'/></td>
							</c:if>
							<c:if test="${consMedCombus == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.consMedCombus != " " ? resultado.consMedCombus : "-"}'/></td>
							</c:if>
							<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.latitude != " " ? resultado.latitude : "-"}'/></td>
							<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.longitude != " " ? resultado.longitude : "-"}'/></td>
						</tr>	
						<c:if test="${resultado.ultMensagem == 'GTIGF'}">
							<c:set var="cor" value="2"/>
						</c:if>	
					</c:when>
				    <c:otherwise>
        				<tr class="cor2">
	 						<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.dtHoraDispositivo != " " ? resultado.dtHoraDispositivo : "-"}'/></td>
	 						<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.codDispositivo != " " ? resultado.codDispositivo : "-"}'/></td>
							<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.ultMensagem != " " ? resultado.ultMensagem : "-"}'/></td>
							<c:if test="${velocidadeInst == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.velocidadeInst != " " ? resultado.velocidadeInst : "-"}'/></td>
							</c:if>
							<c:if test="${rotMotor == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.rotMotor != " " ? resultado.rotMotor : "-"}'/></td>
							</c:if>
							<c:if test="${nvlCombus == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.nvlCombus != " " ? resultado.nvlCombus : "-"}'/></td>
							</c:if>
							<c:if test="${consInsCombus == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.consInsCombus != " " && resultado.consInsCombus != "Inf" ? resultado.consInsCombus : "-"}'/></td>
							</c:if>
							<c:if test="${distPerc == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.distPerc != " " ? resultado.distPerc : "-"}'/></td>
							</c:if>
							<c:if test="${tempViagem == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.tempViagem != " " ? resultado.tempViagem : "-"}'/></td>
							</c:if>
							<c:if test="${consMedCombus == true}">
								<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.consMedCombus != " " ? resultado.consMedCombus : "-"}'/></td>
							</c:if>
							<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.latitude != " " ? resultado.latitude : "-"}'/></td>
							<td style="border-color:white" style="border-style:groove"><c:out value='${resultado.longitude != " " ? resultado.longitude : "-"}'/></td>
						</tr>	
						<c:if test="${resultado.ultMensagem == 'GTIGF'}">
							<c:set var="cor" value="1"/>
						</c:if>
   					</c:otherwise>
				</c:choose>	
			</c:forEach>
			</tbody>

só que está conflitando com o método de paginação:

var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "evenrow";
sorter.odd = "oddrow";
sorter.evensel = "evenselected";
sorter.oddsel = "oddselected";
sorter.paginate = true;
sorter.currentid = "currentpage";
sorter.limitid = "pagelimit";
sorter.init("tableMed",0); // se eu tiro essa linha funciona as cores, mas a paginação some
sorter.dateFormat = "uk";

rdpacato · Novembro 14, 2014

Consegui.. só troquei de class (.cor) para id (#cor) que funcionou... Obrigado pela força ExtremsX

Arquivado

Alterar style das TD

Recommended Posts

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ExtremsX 58

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ExtremsX 58

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ExtremsX 58

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ExtremsX 58

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ExtremsX 58

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ExtremsX 58

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ExtremsX 58

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

ExtremsX 58

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

rdpacato 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real