[Resolvido] Função Sinistra em Javascript

josewilson · Setembro 21, 2012

Galera não estou aqui de primeira procurei pela internet inteira mas vamos lá

Preciso de "uma função" Javascript que execute as seguintes funções

1 - Quando clicar na Tr ative um Radio Button que tenha o mesmo ID

2 - Mude a classe da Tr para linhaselecionada

3 - E que quando for fazer a 2° ação verificar se tem alguma Tr com a classe linhaselecionada e devolva a classe anterior a ela sabendo que a Tr pode ter duas classes:

* .tr-color-blue

* .tr-color-white

Para mim seria isso, mas é claro que não funcionou xD

function action(id, lastClass)

{

document.getElementById(id).checked = true;

if(document.getElementsByTagName(tr).className = "linhaselecionada");

{

setAttribute("class", "lastClass");

}

document.getElementById(id).className = "linhaselecionada";

}

mangakah · Setembro 21, 2012

Cada ID de elemento HTML em um documento deve ser único. Você terá muitos problemas se tiver IDs repetidos em seu documento. Classes pode se repetir indefinidamente e um elemento pode ter mais de uma classe. Mas ID, apenas um.

O método setAtribute não deve ser chamado solto no código como se fosse uma função. Ele faz parte do objeto retornado por getElementById.

O operador de comparação é "==", o operador "=" serve apenas para atribuir um dado valor a uma variável.

Um exemplo simples do que acredito que seja o que você está tentando fazer:

<!doctype html>
<html>
<head>
       <title>Test</title>

       <style>
           table {
               border:#000 solid 1px;

           }
           td {
               border:#ccc dotted 1px;
           }

           .linhaselecionada {
               background-color: lightPink;
           }
       </style>
   </head>
<body>
       <table>
       	<tr id="ln-1">
               <td><input name="linhaselecionada" id="rb-1" type="radio" /></td>
       		<td>A</td>
       		<td>1</td>
       	</tr>
       	<tr id="ln-2">
               <td><input name="linhaselecionada" id="rb-2" type="radio" /></td>
       		<td>B</td>
       		<td>2</td>
       	</tr>
       	<tr id="ln-3">
               <td><input name="linhaselecionada" id="rb-3" type="radio" /></td>
       		<td>C</td>
       		<td>3</td>
       	</tr>
       </table>
       <script>
       var trs = document.getElementsByTagName('tr');

       // crb - checked-radiobutton, sln - selected table row/line <TR>
       var crb, sln;

       for (var i = 0; i < trs.length; i++) {

           // Detectar um clique em um <TR>
           // Adiciona um listener a cada elemento <TR>
           trs[i].addEventListener('click', function(){
               // se ocorrer o clique, executa o comando abaixo
               //console.log(evt, this);
               this.setAttribute("class", "linhaselecionada");

               // marcar o radiobutton
               var rb = document.getElementById( "rb-" + this.getAttribute("id").substr(3));
               rb.checked = true;

               // desmarcar o crb anterior, se houver
               if (typeof(crb) != "undefined") {
                   document.getElementById("rb-" + crb).checked = false;
               }

               // retirar a classe linhaselecionada do sln anterior, se houver
               if (typeof(sln) != "undefined") {
                   document.getElementById("ln-" + sln).setAttribute("class", "");
               }

               // armazena o sln e crb atual para futura verificação
               sln = this.getAttribute("id").substr(3);
               crb = rb.getAttribute("id").substr(3);

           });
       } 

       </script>
   </body>
</html>

josewilson · Setembro 21, 2012

Nossa cara, muitíssimo obrigado 100% funcionando 100% explicado

Mas tem um porém cara, ele não está devolvendo a classe anterior..

<!doctype html>
<html>
       <head>
       <title>Test</title>

       <style>
       table{border:#000 solid 1px;width:100%;}
       td{border:#ccc dotted 1px;height:60px;}
       .tr-color-blue{background-color:#A8DCFF;}
       .tr-color-white{background-color:#EEE;}
       .linhaselecionada{background-color:#F90;color:#FFF;}
       </style>
   </head>
       <body>
       <table>
               <tr id="ln-1" class="tr-color-blue">
               <td><input name="linhaselecionada" id="rb-1" type="radio" /></td>
                       <td>A</td>
                       <td>1</td>
               </tr>
               <tr id="ln-2" class="tr-color-white">
               <td><input name="linhaselecionada" id="rb-2" type="radio" /></td>
                       <td>B</td>
                       <td>2</td>
               </tr>
               <tr id="ln-3" class="tr-color-blue">
               <td><input name="linhaselecionada" id="rb-3" type="radio" /></td>
                       <td>C</td>
                       <td>3</td>
               </tr>
       </table>
       <script>
       var trs = document.getElementsByTagName('tr');

       // crb - checked-radiobutton, sln - selected table row/line <TR>
       var crb, sln;

       for (var i = 0; i < trs.length; i++) {

           // Detectar um clique em um <TR>
           // Adiciona um listener a cada elemento <TR>
           trs[i].addEventListener('click', function(){
               // se ocorrer o clique, executa o comando abaixo
               //console.log(evt, this);
               this.setAttribute("class", "linhaselecionada");

               // marcar o radiobutton
               var rb = document.getElementById( "rb-" + this.getAttribute("id").substr(3));
               rb.checked = true;

               // desmarcar o crb anterior, se houver
               if (typeof(crb) != "undefined") {
                   document.getElementById("rb-" + crb).checked = false;
               }

               // retirar a classe linhaselecionada do sln anterior, se houver
               if (typeof(sln) != "undefined") {
                   document.getElementById("ln-" + sln).setAttribute("class", "");
               }

               // armazena o sln e crb atual para futura verificação
               sln = this.getAttribute("id").substr(3);
               crb = rb.getAttribute("id").substr(3);

           });
       } 
       </script>
   </body>
</html>

mangakah · Setembro 21, 2012

Onde está...

document.getElementById("ln-" + sln).setAttribute("class", "");

Coloque o nome da classe anterior entre " e ".

josewilson · Setembro 21, 2012

Tá so que minha Tr pode ter duas classes, minha intenção é de deixar a tabela mais fácil de se visualizar

mangakah · Setembro 21, 2012

Então é só colocar o nome das classes separados por um espaço.

document.getElementById("ln-" + sln).setAttribute("class", "nomeClasse1 nomeClasse2");

Se o elemento já tiver uma ou mais classes e você quiser adicionar mais uma, use getAttribute para pegar a(s) classe(s) atual(is) e concatene com um espaço e o nome da nova classe.

document.getElementById("ln-" + sln).setAttribute("class", 
 document.getElementById("ln-" + sln).getAttribute("class") // classe(s) já existente(s)
  + " novaClasse"); // nova classe

josewilson · Setembro 21, 2012

As Trs terão classes alternadas uma linha de cor azul a próxima branca e isso quem faz é o PHP por isso tem que salvar a classe da última Tr pra joga-lá de volta

Cara eu so meio leigo em Javascript :| a linha em que mechi está em negrito (É claro que não funcionou :P) mas só pra você tirar uma ideia do jeito que estou pensando

var trs = document.getElementsByTagName('tr');

// crb - checked-radiobutton, sln - selected table row/line <TR>

var crb, sln;

for (var i = 0; i < trs.length; i++) {

// Detectar um clique em um <TR>

// Adiciona um listener a cada elemento <TR>

trs.addEventListener('click', function()

{

// se ocorrer o clique, executa o comando abaixo

var lastClass = document.getElementById("ln-" + sln).getAttribute("class");

this.setAttribute("class", "linhaselecionada");

// marcar o radiobutton

var rb = document.getElementById("rb-" + this.getAttribute("id").substr(3));

rb.checked = true;

// desmarcar o crb anterior, se houver

if (typeof(crb) != "undefined")

{

document.getElementById("rb-" + crb).checked = false;

}

// retirar a classe linhaselecionada do sln anterior, se houver

if (typeof(sln) != "undefined")

{

document.getElementById("ln-" + sln).setAttribute("class", lastClass); // nova classe

}

// armazena o sln e crb atual para futura verificação

sln = this.getAttribute("id").substr(3);

crb = rb.getAttribute("id").substr(3);

});

}

</script>

mangakah · Setembro 21, 2012

Essas cores alternadas (t.c.c. "efeito zebra") também pode ser feito usando apenas CSS. Fica bem mais elegante:

       tr:nth-child(even) {
           background-color:#EEE;
       }

       tr:nth-child(odd) {
           background-color:#A8DCFF;
       }

Mas infelizmente não funciona no IE8. :-/

Você pode usar jQuery nth-child para fazer funcionar também no IE8. Aliás, tudo isso ficaria bem mais fácil e simples se você estivesse usando jQuery. Outra opção é usar estilos inline (atributo style) para definir cada linha da tabela com a cor $odd (azul), $even ("branco") intercaladamente.

josewilson · Setembro 21, 2012

Não teria como fazer pelo Javascript? Faltou somente ele devolver a classe anterior que pertencia a linha

Nesse esquema do CSS a tr-title também entra no efeito zebra...

mangakah · Setembro 21, 2012

       var trs = document.getElementsByTagName('tr');

       // crb - checked-radiobutton, sln - selected table row/line <TR>
       var crb, sln, pcl;
       // ADICIONEI AQUI: pcl - previous class - para armazenar a classe anterior

       for (var i = 0; i < trs.length; i++) {

           // Detectar um clique em um <TR>
           // Adiciona um listener a cada elemento <TR>
           trs[i].addEventListener('click', function(){

               // Antes de mudar a classe, armazenar a classe anterior
               // na variável pcl
               pcl2 = pcl;
               pcl = this.getAttribute("class");

               // se ocorrer o clique, executa o comando abaixo
               //console.log(evt, this);
               this.setAttribute("class", "linhaselecionada");

               // marcar o radiobutton
               var rb = document.getElementById( "rb-" + this.getAttribute("id").substr(3));
               rb.checked = true;

               // desmarcar o crb anterior, se houver
               if (typeof(crb) != "undefined") {
                   document.getElementById("rb-" + crb).checked = false;
               }

               // retirar a classe linhaselecionada do sln anterior, se houver
               if (typeof(sln) != "undefined") {
                   document.getElementById("ln-" + sln).setAttribute("class", pcl2);

               }

               // armazena o sln e crb atual para futura verificação
               sln = this.getAttribute("id").substr(3);
               crb = rb.getAttribute("id").substr(3);


           });
       }

josewilson · Setembro 22, 2012

Perfeito cara.. Valeu!

Tenho muito que aprender ainda :X

Arquivado

[Resolvido] Função Sinistra em Javascript

Recommended Posts

josewilson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

josewilson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

josewilson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

josewilson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

josewilson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

josewilson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

PHP+Codeigniter - Dúvida referente a PDV

PHP+Codeigniter - Dúvida em Relação a Teclas

Fóruns

Tempo Real

Informação importante