Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FabianoSouza

Colorir TR com checkbox marcado

Por , em Desenvolvimento frontend

Recommended Posts

FabianoSouza    5

FabianoSouza
Postado

Tenho um checkbox em cada TR da minha tabela.

Quero que, ao marcar o checkbox, sua respectiva TR seja colorida.

Isso não está funcionando

#menuGridAba tr input[type="checkbox"]:checked
{
	background-color:#F00;
}

Nem isso

 tr:has(input:checked) {
  background:red;
 }

Compartilhar este post

Link para o post
Compartilhar em outros sites

allex_carvalho    124

allex_carvalho
Postado

Bom... Não sei se só com CSS conseguirá este resultado. Uma solução é usar jQuery:

<!DOCTYPE html>
<html>
    <head>
	<title>Teste</title>
		
	<meta charset="utf-8" />
		
	<style>
	    .bg {
		background: #ff0;
	    }
	</style>
		
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function () {
		    jQuery('.verificar').click(function (){
			var $this = jQuery(this);
			if ( $this.is(':checked') ) {
			    jQuery($this).parents('tr').addClass('bg');
			} else {
			    jQuery($this).parents('tr').removeClass('bg');
			}
						
		    });
		});
	</script>
	</head>
	
	<body>
	    <table>
		<thead>
		    <tr>
			<th>ID</th>
			<th>Nome</th>
			<th>Ação</th>
		    </tr>
		</thead>
			
		<tbody>
		    <tr>
			<td>1</td>
			<td>Teste 1</td>
			<td><input type="checkbox" class="verificar" /></td>
		    </tr>
				
		    <tr>
			<td>2</td>
			<td>Teste 2</td>
			<td><input type="checkbox" class="verificar" /></td>
		    </tr>
				
		    <tr>
			<td>3</td>
			<td>Teste 3</td>
			<td><input type="checkbox" class="verificar" /></td>
		    </tr>
		</tbody>
	    </table>
        </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

L. Henrique    179

L. Henrique
Postado

Fabiano e Allex,

De acordo com as documentações do CSS, ainda é inviável a seleção de um elemento pai para estilização. A única coisa que por enquanto dá pra fazer é, adicionar uma propriedade ao elemento pai e passa-la ao filho.

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoSouza    5

FabianoSouza
Postado

Fabiano e Allex,

De acordo com as documentações do CSS, ainda é inviável a seleção de um elemento pai para estilização. A única coisa que por enquanto dá pra fazer é, adicionar uma propriedade ao elemento pai e passa-la ao filho.

Abraços!

Obrigado pela informação, L. Henrique.

Vou ver o que consigo fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito