Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
É uma tabela de clientes, o usuário vai selecionar um cliente e poderá Visualizar, Alterar, Excluir, Editar
Mas o que eu preciso mesmo é de uma função Javascript que quando clique na Tr selecione o Radio Button da Tr e mude a classe para linhaselecionada
Caso o usuário clique em outra Tr a Tr antiga deverá voltar ao seu estado normal
Um carinha tinha feito isso para mim antes mas agora que eu coloquei o efeito zebra em CSS3 o código não funciona corretamente
Galera aqui está o código da tabela para facilitar:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Função Sinistra II</title>
<style type="text/css"></style>
</head>
<body>
<table>
<tr>
<td>Nome</td>
<td>Telefone</td>
<td>Celular</td>
<td>E-mail</td>
<td></td>
</tr>
<tr id='ln-1'>
<td>Cliente 1</td>
<td>Telefone 1</td>
<td>Celular 1</td>
<td>Email 1</td>
<td><input type='radio' id='rb-1' name="line" value='1'/></td>
</tr>
<tr id='ln-2'>
<td>Cliente 2</td>
<td>Telefone 2</td>
<td>Celular 2</td>
<td>Email 2</td>
<td><input type='radio' id='rb-2' name="line" value='2'/></td>
</tr>
<tr id='ln-3'>
<td>Cliente 3</td>
<td>Telefone 3</td>
<td>Celular 3</td>
<td>Email 3</td>
<td><input type='radio' id='rb-3' name="line" value='3'/></td>
</tr>
<tr id='ln-4'>
<td>Cliente 4</td>
<td>Telefone 4</td>
<td>Celular 4</td>
<td>Email 4</td>
<td><input type='radio' id='rb-4' name="line" value='4'/></td>
</tr>
</table>
</body>
</html>Infelizmente eu não tenho capacidade pra fazer, já tentei de tudo perdi muito tempo tentando...
levando em consideração oque você falou na MP
faça o seguinte
baixe o jQuery e add o script ao seu html
nos campos que irá fazer essa ação de unset/set radio
você irá add uma classe q não irá receber nenhum estilo css ela servirá de referencia para o script php
você irá iniciar o bloco de programação jQuery dentro de outra tag script assim que as classes forem a adicionadas as tr's
ref.: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
agora útilizando um seletor jQuery tendo como referencia essa classe criada anteriormente
ref.: http://api.jquery.com/category/selectors/
agora você utilizará um laço de repetição do jQuery
ref: http://api.jquery.com/jQuery.each/
a cada volta do laço irá criar uma função de click para cada item do laço de repetição
ref.: http://api.jquery.com/click/
para deselecionar o radio button é facil você deve utilizar a função de controle de atributos dentro do evento click você irá add a função
ref.: http://api.jquery.com/attr/
$('input[name="line"]').attr('checked','false');
em seguida sete o input referente ao item que foi clicado utilizando o attr
e boa...
bons estudos.
>
Infelizmente eu não tenho capacidade pra fazer, já tentei de tudo perdi muito tempo tentando...
Todo mundo tem capacidade amigo, não pense assim. A dificuldade nos faz crescer!
"Javascript II"
"função sinistra"
sinistro é descrever com esse título e querer que alguém faça o serviço de graça...
quer aprender a pescar o peixe ou quer a comidinha na boca?
exemplo de uso com jquery
$('tr').click(
function() {
$('input[type=radio]',this).attr('checked','checked');
}
);
Olha Vadio consegui fazer isso, mas um problema que encontrei é que quando eu clico na Tr aquela Tr (tr:nth-child(2n+1){background:#EEE;}) não muda de cor nem adicionando uma classe
<script>
$(document).ready(function()
{
$('tr').click(function()
{
$('tr').addClass('linhaselecionada');
});
});
</script>Olha Vadio consegui fazer isso, mas um problema que encontrei é que quando eu clico na Tr aquela Tr (tr:nth-child(2n+1){background:#EEE;}) não muda de cor nem adicionando uma classe
<script>
$(document).ready(function()
{
$('tr').click(function()
{
$('tr').addClass('linhaselecionada');
});
});
</script>
>
exemplo de uso com jquery
$('tr').click(
function() {
$('input[type=radio]',this).attr('checked','checked');
}
);
http://lmgtfy.com/?q=tr+click+check+element
Se fosse só isso tava não seria uma função sinistra uhahuauha xD
fiz umas pequena alteração ak
funciona de boa e de sinistra
procure intende oq foi feito antes de copia e cola..
bons estudos
css
*{margin:0;padding:0;text-decoration:none;font-family:Tahoma, Geneva, sans-serif;}
table{border-spacing:0;width:100%;font-size:14px;}
table tr{background:#A8DCFF;height:20px;}
table tr td{padding:6px;}
table tr:first-of-type{background:#000;color:#FFF;}
table tr td:last-of-type{padding:0;width:25px;}
tr:not(:first-of-type):hover{background:#696;color:#FFF;cursor:pointer}
.zebra{background-color:#EEE;}
.linhaselecionada{background-color:#F90;color:#FFF;}
js
$(document).ready(function(){
$('tr').each(function(item){
if(item !== 0){
if((item%2)==1) $(this).addClass('zebra');
}
})
$('tr').click(function(){
$('tr').removeClass('linhaselecionada');
$(this).addClass('linhaselecionada');
$('input[type=radio]').attr('checked','false');
$('input[type=radio]',this).attr('checked','checked');
});
});$(document).ready(function(){
Tá, aqui ele carrega a função
$('tr').each(function(item){
if(item !== 0){
if((item%2)==1) $(this).addClass('zebra');
}
})
Aqui você tá fazendo o efeito zebra. Não tinha como usar o efeito zebra em CSS né? ele não deixava mudar o background
$('tr').click(function(){
$('tr').removeClass('linhaselecionada');
$(this).addClass('linhaselecionada');
$('input[type=radio]').attr('checked','false');
$('input[type=radio]',this).attr('checked','checked');
});
});
Aqui quando clicar na Tr vai executar a função. Primeiro ele remove as classes linhaselecionada de todas tr, adiciona na que recebeu o click, da o status checked false em todos radios e da o status checked checked no radio da tr é isso?
Ah e outra coisa não teria como a linha que o usuário selecionou não ter efeito aquele efeito hover por que já está selecionada então não precisa
Já consegui!
Tente faze-lo. Mas pelo que vi, é trivial fazer com jQuery!