Clicar na tabela e mudar a cor da célula

Annes · Março 12, 2014

Tem como fazer isso? Explico:

Fiz um site de avaliação, todo em HTML, CSS e JQuery. E no final, tem uma tabela, onde o cursista precisa clicar em qual perfis vai se encaixando, e que cada célula que ele clique, mude de cor de background... se puder mudar com fade melhor ainda.

Eu fiz uma vez algo parecido com isso... só que não era em tabela, e não estou achando o arquivo que eu tinha feito... mas eu tinha feito assim: clicava no botão, e a outra div fazia um fade, só que no caso, era do texto, que passava do preto pro cinza.

Olha, eu encontrei isso daqui... é exatamente o que eu preciso... mas dá pra fazer em tabela tbm? Como?

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeto

ah, mas neste caso aí, não volta a cor inicial se eu clicar de novo... e eu preciso que volte...

Nícolas Luís Huber · Março 12, 2014

Anne, é bem simples de fazer, acho que o código explica por si mesmo:

http://jsfiddle.net/nicolasluishuber/9SrHB/

Marcos Xavier · Março 12, 2014

Utilize troogleclass. Segue um exemplo retirado daqui http://api.jquery.com/toggleClass/

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<style>
p {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.blue {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>
</body>
</html>

Annes · Março 12, 2014

Nícolas, amei seu código, mas quando coloquei na minha página, não funcionou. Vc sabe me dizer o motivo? Eu tentei fazer com link ou com o js no head... mas ambas as formas, não deu certo...

Marcos Xavier, não entendi onde consigo fazer isso com a tabela... Como eu faria isso na tabela?

Vou colocar aqui como está o meu código... aliás, Nícolas, como é que eu faço pra usar esse JSFiddle? Se eu fizer um cadastro já posso usar? E postar meu código lá e passar aqui?

Bem, como eu disse, tentei colocar linkado o JS e tentei colocar no HEAD, vou colocar primeiro o código com o HEAD, e depois coloco o outro:

<head>
	<title>Avaliação</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="../estilos/estilo.css" />
        <script type="text/javascript">
	   $('td').click(function(){
               $(this).toggleClass('clicked').fadeIn('slow');
           });
        </script>
</head>

<body>
	<div id="divTot">
        	<div id="divNavEsq">
                    <ul class="menuvertical">
			<li><a href="../index.html">Apresentação</a></li>
			<li><a href="introducao.html">Introdução</a></li>
			<li><a href="tarefas.html">Tarefas</a></li>
			<li><a href="avaliacao.html">Avaliação</a></li>
			<li><a href="conclusao.html">Conclusão</a></li>
			<li><a href="referencias.html">Referências</a></li>
		    </ul>  
                </div>
                <div id="divNavDir">
                     <table border="1" cellspacing="0" cellpadding="2">
                         <tr>
                            <td width="100">
                                <p>Categorias</p>
                            </td>
                            <td width="170">
                                <p>Iniciante<//p>
                            </td>
                            <td width="170">
                                <p>Regular</p>
                            </td>
                            <td width="210">
                                <p>Intermediário</p>
                            </td>
                            <td width="210">
                                <p>Avançado</p>
                            </td>
                        </tr>
                        <tr>
                            <td width="100"> 
                                <p>Atividade 1</p>
                            </td>
                            <td width="170"> 
                                <p>Conteito A.</p>
                            </td>
                            <td width="170"> 
                                <p>Conceito B.</p>
                            </td>
                            <td width="210"> 
                                <p>Conceito C.</p>
                            </td>
                            <td width="210"> 
                                <p>Conceito D.</p>
                            </td>
                        </tr>
                        <tr>
                            <td width="100"> 
                                <p>Atividade 2</p>
                           </td>
                            <td width="170"> 
                                <p>Conteito A.</p>
                            </td>
                            <td width="170"> 
                                <p>Conceito B.</p>
                            </td>
                            <td width="210"> 
                                <p>Conceito C.</p>
                            </td>
                            <td width="210"> 
                                <p>Conceito D.</p>
                            </td>
                        </tr>
                    </table>
                </div>
	</div>
</body>

O CSS:

body {
	background:#92b7c4;
}

#divTot {
	width:830px;
	background:#fff;
	position:relative;
	margin-left:-415px;
	left:50%;
}
#divNavEsq {
	overflow:hidden; 
	margin-top:10px;
	margin-left:10px;
	width:100px;
	float:left;
}
#divNavDir {
	overflow:hidden; 
	top:0px;
	width:665px;
	float:right;
}
table {
    width: 100%;
    border-collapse: collapse;
    background: #F00;
}
td {
    border: 1px solid #999;
    padding: 10px;
    cursor: pointer;
}
.clicked {
    display: none;
    background: #0F0;
    color: #333;
}

Ou então, eu tentei com o código linkado, aí ficaria assim o HEAD:

<head>
	<title>Avaliação</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="../estilos/estilo.css" />
        <script type="text/javascript" src="../java/javascript.js"> </script>
</head>

O Body continua igual, o CSS tbm, e o arquivo javascript.js ficaria assim:

// JavaScript Document

$('td').click(function(){
    $(this).toggleClass('clicked').fadeIn('slow');
});

Não funciona... a célula até pega a cor do CSS, mas não muda, nem de um jeito, nem de outro... o que eu estou fazendo errado?

Marcos Xavier · Março 12, 2014

Primeiro. Você deve importar a biblioteca jquery

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Feito isso você deve definir quais serão o/os elementos que herdarão a class fade

Exemplo:

 <td class="cornormal"> Atividade 1</td>
 <td class="cornormal"> Conteito A.</td>

//entre as tags <head></head> coloque esse trecho
<style> 
.mudacor { background: yellow; }
</style> 

 <script> 
$( ".cornormal" ).click(function() {
 $( this ).toggleClass( "mudacor" ); 
});

Annes · Março 12, 2014

ainda não deu certo...

Marcos Xavier · Março 12, 2014

Dica.

Sempre crie um arquivo separado para fazer testes. Utilizei parte do seu código,fazendo um mix com o do framework jquery e deu nisso:

<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title></title>
<style>
td {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.normal{
color: normal;
background:red;
}
.highlight {
background: yellow;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 <table>
                         <tr>
                            <td class="normal">
                                <p>Categorias</p>
                            </td>
                            <td class="normal" >
                                <p>Iniciante<//p>
                            </td>
						</tr>
                        <tr>
                            <td class="normal"> 
                                <p>Atividade 1</p>
                            </td>
                            <td class="normal"> 
                                <p>Conteito A.</p>
                            </td>
                        </tr>
             </table>

<script>
$( ".normal" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>

</body>
</html>

reebr · Março 12, 2014

Boa noite Annes.

O problema é que está faltando chamar o "ready()" . Faça isto no cabeçalho do arquivo:

<head>
    <title>Avaliação</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../estilos/estilo.css" />
    <script type = 'text/javascript' src = '//code.jquery.com/jquery-1.10.2.js'></script>
    <script type = 'text/javascript'>
        $(document).ready(function(){
            $('td').click(function(){
               $(this).toggleClass('clicked').fadeIn('slow');
           });
        });
    </script>
</head>

Nícolas Luís Huber · Março 13, 2014

Annes, acho que a dica do rnxn vai fazer seu código funcionar. Quanto ao JSFiddle, basta criar um conta e sair usado e compartilhando o código, lá ele faz a inserção automática de alguns Frameworks Javascript, podes ver que no meu exemplo ele incluía o jQuery 1.9.1, na aba Frameworks & Extensions. Por isso seu código não funcionou localmente, faltava incluir o famoso jQuery.

Marcos Xavier · Março 13, 2014

Boa noite Annes.

O problema é que está faltando chamar o "ready()" . Faça isto no cabeçalho do arquivo:

Nao necessariamente @rnxn. Crie um htm com exemplo que postei (baseado no exemplo retirado daqui http://api.jquery.com/toggleClass/)

Annes · Março 14, 2014

ah, gente... não entendo porque não dá certo aqui! Nenhuma das dicas de vcs ainda funcionou!!! :no:

preciso tanto desse negócio funcionando! Alguém podia tentar no meu código que eu coloquei aqui, pra ver se funciona (local)?

Ou ver o que eu tenho que fazer, no total...

Obrigada pela atenção que estão me dando!

Marcos Xavier · Março 14, 2014

Você está testando em qual navegador?

Já fez testes apenas usando o/os código/os postado/os?

Annes · Março 14, 2014

Marcos Xavier, o seu código eu testei separadamente, e deu certo... mas quando eu coloco no meu código, não funciona. O problema é que o meu código é imenso... é uma tabela gigante... vários links, divs, etc... Será que algo no meu código está atrabalhando o funcionamento da tabela?

Na tabela original, eu usei colspan e rolspan em algumas células, mas não nas que vão precisar mudar... será que isso está atrapalhando? O que eu faço? Posto o código inteiro aqui, retirando apenas os textos (pra não ocupar espaço excessivo)?

Ah, esqueci de comentar...

Testo sempre primeiro no Google Chrome e no Mozilla, depois no IE, e em nenhum deles, no meu código está funcionando...

Marcos Xavier · Março 14, 2014

Faça o seguinte. Exiba o codigo fonte gerado e posta aqui.

Annes · Março 14, 2014

Vai integral...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Mobilidade</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="../estilos/estilo.css" />
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>
    <script>
$( ".normal" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>
	<div id="divTot">
		<div id = "divNavcent">
			<div id="divTop">
			
			</div>
			<div id="miolo">
				<div id="divNavEsq">
					<ul class="menuvertical">
						<li><a href="../index.html">Apresentação</a></li>
						<li><a href="introducao.html">Introdução</a></li>
						<li><a href="tarefas.html">Tarefas</a></li>
						<li><a href="processo.html">Processo</a></li>
						<li><a href="avaliacao.html">Avaliação</a></li>
						<li><a href="conclusao.html">Conclusão</a></li>
						<li><a href="referencias.html">Referências</a></li>
						<li class="btnultimo"><a href="creditos.html">Créditos</a></li>
					</ul>  
				</div>
				<div id="divNavDir">
					<h1>Avaliação - Rubrica</h1>
					<p>Compreendemos que uma das maiores dificuldades encontradas no  processo de avaliação em cursos a distância diz respeito ao procedimento de  "atribuir nota" às atividades desenvolvidas. Em muitos casos, o cursista chega  ao final da atividade ou módulo sem saber os critérios pelos quais foi  avaliado, o que torna o processo avaliativo muito subjetivo.</p>
					<p>No  curso Aprendizagem com mobilidade, estamos adotando a <strong>rubrica</strong> como  instrumento de avaliação. As rubricas são utilizadas para estabelecer os  critérios avaliativos dos processos de aprendizagem durante todo o  desenvolvimento do curso. A partir dos critérios estabelecidos, o cursista  compreende antecipadamente os caminhos que deve percorrer na realização das  tarefas e também como melhorar seu desempenho durante as atividades do curso.</p>

					<table border="1" bordercolor="#006699" cellspacing="0" cellpadding="2">
						<tr>
							<td width="100" rowspan="2" bgcolor="#999999">
								<p align="center"><strong>Categorias</strong></p></td>
							<td width="760" colspan="4" bgcolor="#CCCCCC"><p align="center"><strong>INDICADORES/CRITÉRIOS PARA AVALIAÇÃO DE DESEMPENHO</strong></p></td>
						</tr>
						<tr>
							<td width="170" bgcolor="#FFBFBF">
								<p align="center"><strong>Iniciante</strong></p></td>
							<td width="170" bgcolor="#FFFFAA">
								<p align="center"><strong>Regular</strong></p></td>
							<td width="210" bgcolor="#BCFFB3">
								<p align="center"><strong>Intermediário</strong></p></td>
							<td width="210" bgcolor="#9DCEFF">
								<p align="center"><strong>Avançado</strong></p></td>
						</tr>
						<tr>
							<td width="100" bgcolor="#CCCCCC"> 
								<p align="center">Atividade Glossário</p></td>
							<td width="170" class="normal"> 
								<p>Registrou um conceito relacionado ao tema proposto, porém não consultou os conceitos registrados, demonstrando não ter realizado a leitura dos mesmos. </p></td>
							<td width="170" class="normal"> 
								<p>Registrou um conceito relacionado ao tema proposto. O conceito é parcialmente relevante. Consultou os conceitos já inseridos e buscou referências como dicionário e outras fontes para registrá-lo.</p></td>
							<td width="210" class="normal"> 
								<p>Registou um conceito relacionado ao tema proposto. O conceito é relevante e contribui para a compreensão dos materiais de estudo. Consultou os conceitos já inseridos e buscou referências como dicionário e outras fontes para registrá-lo. Comentou um conceito postado por outro cursista.</p></td>
							<td width="210" class="normal"> 
								<p>Registou mais de um conceito relacionado ao tema proposto, demonstrando conhecimento do termo e rigor na escrita. O conceito é relevante e contribui para a compreensão dos materiais de estudo. Consultou os conceitos já inseridos e buscou referências como dicionário e outras fontes para registrá-lo. Comentou de forma precisa e fundamentada um ou mais conceitos postados por outros cursistas.</p></td>
						</tr>
						<tr>
							<td width="100" bgcolor="#CCCCCC"> 
								<p align="center">Atividade Fórum</p></td>
							<td width="170" class="normal"> 
								<p>A postagem do cursista fugiu ao tema/tópico/ enunciado proposto. As ideias e contribuições foram irrelevantes para a discussão e, por vezes, repetitivas. Precisa melhorar a coerência no desenvolvimento das ideias. Não interagiu com os demais cursistas.</p></td>
							<td width="170" class="normal"> 
								<p>A postagem do cursista atendeu, em parte, o tema/tópico/ enunciado proposto. As ideias e contribuições foram parcialmente relevantes para a discussão, mas faltou clareza na organização das ideias. Interagiu com os demais cursistas, mas não contribuiu efetivamente com a produção do outro.</p></td>
							<td width="210" class="normal"> 
								<p>A postagem do cursista atendeu o tema/tópico/ enunciado proposto. As contribuições apresentadas são relevantes para a discussão. O desenvolvimento de ideias demonstra clareza e coerência. Interagiu com o grupo procurando contribuir efetivamente com as produções de outros colegas.</p></td>
							<td width="210" class="normal"> 
								<p>A postagem do cursista atendeu o tema/tópico/ enunciado proposto. As ideias e contribuições são muito relevantes e estimulantes para a discussão. O desenvolvimento de ideias é coerente, profundo, metódico e faz <em>links</em> com outras referências do curso. Interagiu com o grupo e contribuiu para a melhoria das produções de outros colegas.</p></td>
						</tr>
						<tr>
							<td width="100" bgcolor="#CCCCCC"> 
								<p align="center">Atividade Diário</p></td>
							<td width="170" class="normal"> 
								<p>Registrou sua participação no diário. A escrita do diário não correspondeu completamente ao enunciado. A linguagem apresenta senso comum. Não retornou ao diário para visualização do <em>feedback</em> do professor-tutor.</p></td>
							<td width="170" class="normal"> 
								<p>Registrou sua participação no diário, atendendo ao tema/enunciado proposto, porém desenvolveu a atividade de forma superficial, sem referências aos estudos. Retornou ao diário para visualização do <em>feedback</em>, porém não respondeu ao <em>feedback</em> do professor-tutor.</p></td>
							<td width="210" class="normal"> 
								<p>Registrou sua participação no diário, atendendo ao tema/enunciado proposto. Desenvolveu a atividade com base nas leituras, demonstrando bons argumentos e algum domínio sobre os conteúdos e temas trabalhados. Escreve de forma clara, porém com pouca fundamentação. Retornou ao diário para verificação do <em>feedback</em>, reformulando ou completando seu diário conforme orientações do professor-tutor.</p></td>
							<td width="210" class="normal"> 
								<p>Registrou sua participação no diário, atendendo ao tema/enunciado proposto. Escreveu o texto do diário com base nas leituras, materiais disponibilizados, discussões e outras fontes de pesquisa, demonstrando domínio do tema, compreensão da questão norteadora, capacidade de fazer referência aos elementos/conceitos estudados e de reflexão crítica. Escreve de forma clara, coerente e bem fundamentada. Retornou, mais de uma vez, para visualizar o <em>feedback</em> do professor-tutor, considerando as alterações solicitadas.</p></td>
						</tr>
						<tr>
							<td width="100" bgcolor="#CCCCCC"> 
								<p align="center">Produção Audiovisual</p></td>
							<td width="170" class="normal"> 
								<p>A produção do cursista atendeu parcialmente o tema proposto.</p>
								<p>Não demonstrou domínio técnico. Seu roteiro foi desenvolvido com dificuldades. Acessou as produções de outros cursistas, porém não colaborou com comentários.</p></td>
							<td width="170"> 
								<p>A produção do cursista correspondeu ao tema proposto, porém demonstrou domínio das técnicas de produção e de elaboração do roteiro. Acessou as produções de outros cursistas, colaborando com comentários.</p></td>
							<td width="210"> 
								<p>A produção do cursista correspondeu ao tema proposto, demonstrando domínio de técnica, com roteiro elaborado e exibição correspondente à temática. A entrevista foi conduzida de forma dinâmica, contemplando o tema proposto. Acessou as produções de outros cursistas, colaborando com comentários relevantes.</p></td>
							<td width="210"> 
								<p>A produção do cursista atendeu completamente o tema proposto, superando expectativas. Realizou a produção audiovisual demonstrando ótimo domínio de técnica, com	roteiro bem elaborado, considerando os materiais de estudo, com exibição adequada à temática. A entrevista foi conduzida de forma dinâmica e inovadora, contemplando o tema proposto. Acessou as produções de outros cursistas, colaborando com comentários relevantes.</p>
							</td>
						</tr>
						<tr>
							<td width="100" bgcolor="#CCCCCC"> 
								<p align="center">Atividade Microconto</p></td>
							<td width="170"> 
								<p>O microconto está relacionado ao tema proposto, porém precisa atender às características de narrativa. Não desenvolveu o microconto com base nas imagens captadas. O	microconto não foi compartilhado conforme orientações.</p></td>
							<td width="170"> 
								<p>O microconto está relacionado ao tema proposto, é conciso e apresenta uma história. A narrativa não possibilita múltiplas interpretações. Desenvolveu o microconto com base nas imagens captadas, porém, não compartilhou a produção conforme orientações.</p></td>
							<td width="210"> 
								<p>O microconto está relacionado ao tema proposto, é conciso e apresenta um enredo. Não há determinação de personagens e a narrativa possibilita ao leitor diferentes	interpretações. Desenvolveu o microconto com base nas imagens captadas, porém, expôs de forma superficial a percepção de prótese personalizada. O microconto foi compartilhado conforme orientações.</p></td>
							<td width="210"> 
								<p>O microconto atendeu completamente o tema proposto, superando expectativas. Não há determinação de personagens e a narrativa possibilita diferentes	interpretações, além de causar um efeito de impacto, sugerido na forma de conflito, dramaticidade, humor, etc. Expôs a percepção sobre os processos identificatórios e relacionou a produção ao conceito de prótese	personalizada. Compartilhou o microconto conforme orientações e colaborou comentando as produções de outros cursistas.</p>
							</td>
						</tr>
						<tr>
							<td width="100" bgcolor="#CCCCCC"> 
								<p align="center">Interação no curso</p></td>
							<td width="170"> 
								<p>O cursista interagiu parcialmente com outros cursistas e às vezes respondeu as mensagens do professor-tutor.</p></td>
							<td width="170"> 
								<p>O cursista interagiu com os demais colegas, mas não contribuiu efetivamente com os debates. Interagiu pouco com outros cursistas e respondeu algumas mensagens do professor-tutor.</p></td>
							<td width="210"> 
								<p>O cursista interagiu com outros cursistas, contribuindo para os debates do curso. Suas intervenções foram éticas e parcialmente críticas/reflexivas.</p>
								<p>Manteve diálogo com o professor-tutor. </p></td>
							<td width="210"> 
								<p>Interagiu com outros cursistas de forma crítica e ética, apresentando sugestões e comentários relevantes e contextualizados, contribuindo para o enriquecimento da discussão do grupo. Manteve diálogo constante com o professor-tutor, respondendo suas mensagens e entrando em contato em caso de dúvidas ou sugestões.</p></td>
						</tr>
						<tr>
							<td width="100" bgcolor="#CCCCCC">
								<p align="center">Atividade Tarefa</p></td>
							<td width="170">
								<p>A produção da tarefa foi parcialmente realizada, tomando-se como referência o enunciado proposto. O cursista teve dificuldades na produção textual e na articulação das ideias. Algumas vezes, retornou para visualizar o <em>feedback</em> do professor-tutor.</p></td>
							<td width="170">
								<p>A produção atendeu ao enunciado proposto, mas precisa melhorar na clareza e na organização das ideias. </p>
								<p>Elaborou o texto com bons argumentos. Retornou para visualizar o <em>feedback</em> do professor-tutor, mas não considerou as alterações solicitadas.</p></td>
							<td width="210">
								<p>Produziu um texto fundamentado nas referências indicadas. Retornou para visualizar o <em>feedback</em> do professor-tutor e considerou as alterações solicitadas.</p>
								<p>Demonstrou empenho nas tarefas propostas.</p></td>
							<td width="210">
								<p>Teve facilidade na produção textual.</p>
								<p>Produziu um texto bem fundamentado, com base nas referências da unidade e nas pesquisas de outras fontes. Procurou sintetizar suas ideias, considerando, também, as suas vivências e discussões com o grupo. Retornou mais de uma vez para visualizar o <em>feedback</em> do professor-tutor, considerando as alterações solicitadas.</p></td>
						</tr>
						<tr>
							<td width="100" bgcolor="#CCCCCC"> 
								<p>Leitura, pesquisa e análise dos materiais de estudo</p></td>
							<td width="170"> 
								<p>Acessou o curso, leu todos os textos e visualizou os vídeos recomendados para a realização das tarefas, mas, ao longo do curso, não demonstrou domínio na leitura e rigor na pesquisa de materiais.</p>
							</td>
							<td width="170"> 
								<p>Acessou o curso, leu todos os textos e visualizou os vídeos recomendados para a realização das tarefas. Ao longo do curso, demonstrou domínio parcial na leitura e pouco rigor na pesquisa de materiais. </p></td>
							<td width="210"> 
								<p>Acessou o curso, leu todos os textos e visualizou os vídeos recomendados para a realização das tarefas. Ao longo do curso, demonstrou domínio na leitura e rigor na pesquisa de materiais, demonstrando apropriação dos conteúdos disponibilizados no curso. </p></td>
							<td width="210">
								<p>Acessou periodicamente o curso, realizando a leitura de todos os textos e visualizando os vídeos recomendados, demonstrando iniciativa na busca de fontes complementares. Ao longo do curso, apresentou domínio na leitura, rigor na pesquisa e referência de materiais, demonstrando apropriação dos conteúdos disponibilizados no curso, e compartilhou outros materiais que encontrou sobre o tema.</p></td>
						</tr>
					</table>

				</div>
		  	</div>
		</div>
			<div id = "divRodp">
			</div>






	</div>

</body>
</html>

E o CSS (tbm vai integral):

@charset "utf-8";
/* CSS Document */

body {
	background:#92b7c4;
	/* a9d1db */
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	overflow-x: hidden;
}

p {
	text-decoration:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	border:0px;
	border:none;
}

a {
	text-decoration:none;
	font-family:Verdana, Geneva, sans-serif;
	border:0px;
	border:none;
}

a:link {
	color:#000;
} 

a:visited {
	color:#000;
} 

a:hover {
	color:#000;
	text-decoration:underline;
}

hr {
	width:90%;
	color:#09C;
}

h1 {
	color:#2a435f;
	font-size:12pt;
	font-family:Verdana, Geneva, sans-serif;
	margin-left:0px;
	margin-top:20px;
	text-align:left;
} 

h2 {
	color:#13687d;
	font-size:10pt;
	font-family:Verdana, Geneva, sans-serif;
	margin-left:10px;
	margin-top:20px;
}

h3 {
	font-size:12pt;
	font-family:Verdana, Geneva, sans-serif;
	margin-left:10px;
	margin-top:20px;
}

#esq {
	position:absolute;
	background:#fff;
	top:0px;
	left:5px;
	width:230px;
}

hr {
	width:90%;
	color:#09C;
}

ul, {
	margin-top: 0;
}

li {
	list-style-position:inside;
}

.list1 {
	list-style-image:url(../imags/cursor3.jpg);
	height:25px;
}

.list2 {
	list-style:square;
	line-height:180%;
}

.list3 {
	list-style:decimal;
	line-height:180%;
}

.list4 {
	list-style:circle;
}

#divTot {
	width:830px;
	background:#fff;
	height:auto;
	position:relative;
	top:0px;
	margin-top:0px;
	margin-left:-415px;
	left:50%;
}

#divTop {
	position:relative;
	background:url(../imags/top.jpg) center no-repeat;
	top:0px;
	left:0px;
	width:830px;
	height:208px;
}

#divNavCent {
	overflow:hidden; 
	position:relative;
	top:0px;
	left:268px;
	background:#Fff;
	width:766px;
	min-height:568px;
	height:auto;
	padding-left:40px;
	padding-right:40px;
}

#miolo {
	background:#FFf;
	width:830px;
	overflow:hidden;
	top:0px;
	position:relative;
	min-height:568px;
}

#divNavEsq {
	overflow:hidden; 
	margin-top:10px;
	margin-left:10px;
	width:100px;
	height:auto;
	float:left;
	border:#444444 solid 2px;
	background:#DAE7E6;
	margin-bottom:20px;
	position: fixed;
}

#divNavDir {
	overflow:hidden; 
	top:0px;
	width:665px;
	float:right;
	margin-bottom:10px;
	padding-right:20px;
	border:#06C dashed 2px;
	padding-left:10px;
	padding-bottom:10px;
	margin-top:10px;
	margin-right:10px;
}

#divBotImgs {
	text-align:center;
	padding:20px;
}

#divAlerta {
	color:#000;
	padding:15px;
	margin:15px;
	border:#444444 solid 2px;
	background:#DAE7E6;
	display:none;
}

#divRodp {
	background:#1b2d40;
	width:auto;
	height:35px;
}

#divQuadro {
	border:#069 solid 1px;
	padding-left:10px;
	padding-right:10px;
}

.subLis {
	list-style-position:outside;
}

.alignDireita {
	text-align:right;
}

.listDir{
	right:10px;
	float:right;
}

.botIni {
	text-align:center;
	width:100px;
	position:relative;
	display:block;
	height:30px;
	background:#a2d09b;
	left:0px;
}

.botIni:hover {
	background:#7db875;
}

.menuvertical{
	margin:0px;
	width:100px;
	height:auto;
	padding-left:0px;
}
.menuvertical li{
	padding:0px;
	margin:0px;
	border-bottom:#fff solid 1px;
	list-style:none; 
}
.menuvertical a{
	display:block;
	text-decoration:none;
	font-weight:normal;
	padding:10px;
	background:#2a435f;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#fff;
} 
.menuvertical :hover{
	background:#1b2d40;
	text-decoration:underline;
	color:#fff;
	text-shadow:0px 0px 8px #fff; 
}
.menuvertical li.btnultimo{
	border-bottom: none;
	color:#fff;
	padding:0px;
}



/*   estilos do acordion	*/

.accordionButton {	
	width:760px;
	float:left;
	_float:none;
	border-bottom:none;
	cursor:pointer;
	padding:2px;
	padding-left:20px;
	margin:2px;
	text-align:left;
}
	
.accordionContent {	
	width:650px;
	float:left;
	_float:none;
	background:#fff;
	margin:5px;
	text-wrap:normal;
	padding-left:10px;
	padding-right:10px;
}

#tar1 {
	background:#099;
	width:660px;
	float:left;
	padding:2px;
	padding-left:20px;
	margin:2px;
}
#tar1.over {
	background:#066;
	text-decoration:underline;
	color:#FFF;
}
#tar1.on {
	background:#399;
}
#bor1 {
	border:#099 dashed 2px;
	width:650px;
	float:left;
	margin:5px;
	text-wrap:normal;
	padding-left:10px;
	padding-right:10px;
}
.cores1 {
	color:#099;
}
.cores1a {
	color:#099;
	text-decoration:underline;
}
.cores1a:hover {
	color:#066;
}
#icons1 {
	background:#78b6b6;
}
#icons1:hover {
	background:#066;
	color:#fff;
}
#icons10 {
	background:#308686;
}

.botEescola {
	border-bottom:#FFF solid 1px;
	text-align:left;
	width:95%;
	left:20px;
	position:relative;
	display:block;
	height:25px;
	padding-top:5px;
	padding-left:5px;
}
.botEescola2 {
	border-bottom:#FFF solid 1px;
	text-align:left;
	width:95%;
	left:20px;
	position:relative;
	display:block;
	height:40px;
	padding-top:5px;
	padding-left:5px;
}
.botEescola3 {
	border-bottom:#FFF solid 1px;
	text-align:left;
	width:95%;
	left:20px;
	position:relative;
	display:block;
	height:60px;
	padding-top:5px;
	padding-left:5px;
}

#tar2 {
	background:#C90;
	width:660px;
	float:left;
	padding:2px;
	padding-left:20px;
	margin:2px;
}
#tar2.over {
	background:#aa7c00;
	text-decoration:underline;
	color:#FFF;}
#tar2.on {
	background:#FC0;
}
#bor2 {
	border:#C90 dashed 2px;
	width:650px;
	float:left;
	margin:5px;
	text-wrap:normal;
	padding-left:10px;
	padding-right:10px;
}
.cores2 {
	color:#C90;
}
.cores2a {
	color:#C90;
	text-decoration:underline;
}
.cores2a:hover {
	color:#aa7c00;
}
#icons2 {
	background:#c5ac61;
}
#icons2:hover {
	background:#92710e;
	color:#fff;
}
#icons20 {
	background:#a88a31;
}

#tar3 {
	background:#969;
	width:660px;
	float:left;
	padding:2px;
	padding-left:20px;
	margin:2px;
}
#tar3.over {
	background:#636;
	text-decoration:underline;
	color:#FFF;}
#tar3.on {
	background:#b075b0;
}
#bor3 {
	border:#969 dashed 2px;
	width:650px;
	float:left;
	margin:5px;
	text-wrap:normal;
	padding-left:10px;
	padding-right:10px;
}
.cores3 {
	color:#969;
}
.cores3a {
	color:#969;
	text-decoration:underline;
}
.cores3a:hover {
	color:#636;
}
#icons3 {
	background:#b690b6;
}
#icons3:hover {
	background:#794b79;
	color:#fff;
}
#icons30 {
	background:#865a86;
}

.accordionButton2 {	
	width:620px;
	float:right;
	_float:none;
	border-bottom:none;
	cursor:pointer;
	padding:2px;
	padding-left:20px;
	margin:2px;
	text-align:left;
}
	
.accordionContent2 {	
	width:600px;
	float:right;
	_float:none;
	background:#fff;
	margin:5px;
	text-wrap:normal;
	padding-left:10px;
	padding-right:10px;
}

#per1 {
	background:#d1ae43;
}
#per1.over {
	background:#e0bc4f;
	text-decoration:underline;
}
#per1.on {
	background:#b09030;
}
#borper {
	border:#b09030 solid 2px;
}
.coresper {
	color:#b09030;
}

#icons4 {
	background:#799bac;
}
#icons4:hover {
	background:#2a435f;
	color:#fff;
}
.cores4a {
	color:#799bac;
	text-decoration:underline;
}
.cores4a:hover {
	color:#2a435f;
}

/* estilos da tabela mudando de cor 
*/

td {
margin: 4px;
font-size: 16px;
font-weight: bolder;
cursor: pointer;
}
.normal{
color: normal;
background:red;
}
.highlight {
background: yellow;

Marcos Xavier · Março 14, 2014

Dois meios de resolver um é o que o nosso amigo @rnxn postou http://forum.imasters.com.br/topic/517856-clicar-na-tabela-e-mudar-a-cor-da-clula/#entry2058170 (falha minha :innocent: )

O segundo meio é colocando o script depois da tag de finalização da tabela (</table>)

<script>
    $( ".normal" ).click(function() {
        $( this ).toggleClass( "highlight" );
    });    

</script>

Nícolas Luís Huber · Março 14, 2014

Annes, tenta colocar seu script assim:

$(document).ready(function(){
    $( ".normal" ).click(function() {
        $( this ).toggleClass( "highlight" );
    });
});

Ou então deixar o código que você tinha, mas colocar no final do HTML, antes de fechar o body.

reebr · Março 15, 2014

Nao necessariamente @rnxn. Crie um htm com exemplo que postei (baseado no exemplo retirado daqui http://api.jquery.com/toggleClass/)

Não entendi. Isto?

http://jsfiddle.net/a7uXF/

Marcos Xavier · Março 15, 2014

Post #8

@Annes.

Sugiro editar o post http://forum.imasters.com.br/topic/517856-clicar-na-tabela-e-mudar-a-cor-da-clula/#entry2058737'>#15 deixando somente o CSS parte do HTML em questão. Isso vai deixar o tópico com mais qualidade de como consequência mais simples de entender(aos que porventura tenham problemas parecidos)

Arquivado

Clicar na tabela e mudar a cor da célula

Recommended Posts

Annes 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas Luís Huber 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annes 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annes 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

reebr 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas Luís Huber 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annes 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annes 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annes 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas Luís Huber 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

reebr 94

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio