Publicado em 21 de set.

[Resolvido] Função Sinistra em Javascript

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";

}

 

<tr onClick='action(this.id,this.class)' id='$codigo' class='tr-color-blue'></tr>

<tr onClick='action(this.id,this.class)' id='$codigo' class='tr-color-white'></tr>

<tr onClick='action(this.id,this.class)' id='$codigo' class='tr-color-blue'></tr>

<tr onClick='action(this.id,this.class)' id='$codigo' class='tr-color-white'></tr>

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

mangakah· 21 de set.

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· 21 de set.

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· 21 de set.

Onde está...

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

Coloque o nome da classe anterior entre " e ".

josewilson· 21 de set.

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

mangakah· 21 de set.

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· 21 de set.

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

<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*.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· 21 de set.

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· 21 de set.

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· 21 de set.

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· 22 de set.

Perfeito cara.. Valeu!

Tenho muito que aprender ainda :X