Ir para conteúdo

POWERED BY:

Arquivado

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

josewilson

[Resolvido] Função Sinistra em Javascript II

Por , em Javascript

Recommended Posts

josewilson    0

josewilson
Postado

É 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">
*{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;}
tr:nth-child(2n+1){background:#EEE;}
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}
.linhaselecionada{background:#F90;color:#FFF;}
</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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

Tente faze-lo. Mas pelo que vi, é trivial fazer com jQuery!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme_90    33

Guilherme_90
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

"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');
   }
);

 

http://lmgtfy.com/?q=tr+click+check+element

Compartilhar este post

Link para o post
Compartilhar em outros sites

josewilson    0

josewilson
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

josewilson    0

josewilson
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

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');
           });
       });

Compartilhar este post

Link para o post
Compartilhar em outros sites

josewilson    0

josewilson
Postado 

       $(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

Compartilhar este post

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

Informação importante

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

  Aceito