Discussoes de Programacao e Tecnologia

Problemas com Javascript

17 respostas
maxmustang
maxmustang

opa galera, blz?
to com a seguinte duvida
eu tenho uma tabela

<tr>

<td height="25" id="teste" onclick="trocarCorDosCampos(this);">
1- Registro ANS<br>
&lt;input name="teste" type="text" size="20" onclick="validarCamposObrigatoriosEenviarGuia();" &gt;
&lt;/td&gt;

&lt;td class="escura" onclick="trocarCorDosCampos(this);"&gt;
3- N&ordm; Guia Principal<br>
&lt;input name="text" type="text" class="campoCinza"&gt;
&lt;/td&gt;

eu quero quando clicar dentro do <td> mudar a cor do <td> e do input
por exemplo no td um… a cor ta branca, eu cliquei… ficaria cinza, cliquei denovo, ficaria branca. No td 2, ele tem um class que deixa a cor do campo cinza automaticamente,
quando eu clicar… queria que ela fosse branca … clicar denovo… fosse cinza

ja tentei mil vezes… e nao consegui nada
:smiley:

function trocarCorDosCampos(campo){

    if(campo.stylesheet[0].rules[0].style.color == '#CCCCCC'){
        campo.style.backgroundColor = '#FFFAFA';
    }
        
    /*if(campo.style.backgroundColor == '#CCCCCC'){
        //campo.style.className = "branca"
        campo.style.backgroundColor = '#FFFAFA';
        
    }*/
   /* else{
        campo.style.backgroundColor =;
        campo.style.className = "escura";
    } */
}

quem puder ajudar

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

17 Respostas

Gustavokt
Gustavokt

Você podeia definir uma classe de css e trocar o className quando clica num td

maxmustang
maxmustang

criei na folha o

.formularioGuia TD.clara{
    padding:2px;
    border:1px #000000 solid;
    background-color:#FFFAFA;

function trocarCorDosCampos(campo){
    campo.className = (campo.className == "escura") ? "clara" : "escura";
}

blz, funcionou uma parte
xD
problema ainda
é que eu tenho um input dentro do <td>
e esse input tem um class propria

&lt;input name="text"  type="text" class="campoCinza"&gt;

como eu faria pra ao mudar a cor do <td>
tb mudar a cor do input?

Ygor
Ygor

Tente algo assim e veja se funciona

.xhtml

<tr>
  <td id="teste" onclick="jsMudaCor(this)">
  Click-me para mudar de cor
  </td>
</tr>

.js

function jsMudaCor(linha) {
      if(linha.style.backgroundColor==''){
           linha.style.backgroundColor='black';
      } else {
           linha.style.blackground='';
      }
}

/* Maneira alternativa
function jsMudaCor(linhaId) {
     
      if(document.getElementById(linhaId).style.backgroundColor==''){
           document.getElementById(linhaId).style.backgroundColor='black';
      } else {
           document.getElementById(linhaId).style.blackground='';
      }
}
*/

Creio que assim irá funcionar, qualquer coisa poste aí

maxmustang
maxmustang

opa igor, blz cara?
ja consegui trocar as coras do td
problema agora
é quando mudar a do input… mudar a do td junto

Gustavokt
Gustavokt

Se você não for usar o trocarCorDosCampos() em outro lugar, você pode forçar a pegar os input do tipo text e fazer algo parecido com o que você já fez com o td.

Se for usar o trocarCorDosCampos() em outro lugar, ai precisa pensar um pouco melhor…

Ygor
Ygor

Tu quer que quando o cara click no

ou no mude a cor dos dois?
Esses campos são dinâmicos/randômicos ou são fixos?
Por que se forém fixos tu pode resolver da seguinte maneira. 
function jsMudaCor(){
 if(document.getElementById('linhaId').style.backgroundColor==''){  
           document.getElementById('linhaId').style.backgroundColor='gray';  
           document.getElementById('inputId').style.backgroundColor='gray';
      } else {  
           document.getElementById('linhaId').style.blackgroundColor='';  
           document.getElementById('inputId').style.blackgroundColor=''; 
      }
}

linhaId seria o id da TD
inputId seria o id do INPUT

Só que talvez seja necessário tu trabalhar melhor esse código de acordo com a sua aplicação, usar um verificador talvez.
Mas a idéia é essa, tu centralizar a mudança de cor em uma função que não recebe argumento nenhum e ela trocar a cor dos dois objetos sempre que for chamada

maxmustang
maxmustang

valeu rapaziada
consegui
:smiley:

function jsMudaCor(td,inp){
    if(document.getElementById(td).className == "escura" && document.getElementById(inp).className == "campoCinza"){
        document.getElementById(td).className = "clara";
        document.getElementById(inp).className = "campoClaro";
    } else{
        document.getElementById(td).className = "escura";
        document.getElementById(inp).className = "campoCinza";
    }
}

haha!

denirroberto
denirroberto

Galera estou com o mesmo problema, na verdade é com dataTable do JSF1.2 quero que mude a cor da linha quando clicado, ao clicar novamente ele retorna a cor padrão, no caso uso ela zebrada, se clicar em outra linha ele tira a seleção de uma linha se estiver selecionada e seleciona a nova linha. o que tenho a té o momento é isso:

function selLinha(tblLista) {
    trs = document.getElementById(tblLista).getElementsByTagName('td');
    for (i=0; i < trs.length; i++) {
        trs[i].onclick = function() {
            this.parentNode.style.color = '#FFFFFF';
            this.parentNode.style.backgroundColor = '#77A0FF';
        }
    }
}

Como dar continuidade, ele funciona quando clico, porém falta tirar quando clicado sobre a mesma, ou quando clicado em outra ele precisa tirar, se tiver alguma linha selecionada, e selecionar a nova linha.

R
rodrigo_web

Mude só a cor da td ex

function trocarCorDosCampos(td){  
  
    if(td.className == 'branca'){  
        td.className.className = 'cinza';
}else{
td.className.className = 'branca';
    } 
}

dai voce cria rule css

.cinza {
background-color: cinza;
}

.cinza input {
background-color: cinza
border: 1px solid red;
}

.branca {
background-color: branco;
}

.branca input {
background-color: branco;
border: 1px solid blue;
}

é só seguir o exemplo...

[]s

R
rodrigo_web
rodrigo web:
Mude só a class da td ex 
function trocarCorDosCampos(td){  
  
    if(td.className == 'branca'){  
        td.className.className = 'cinza';
}else{
td.className.className = 'branca';
    } 
}

dai voce cria rule css

.cinza {
background-color: cinza;
}

.cinza input {
background-color: cinza
border: 1px solid red;
}

.branca {
background-color: branco;
}

.branca input {
background-color: branco;
border: 1px solid blue;
}

é só seguir o exemplo...

[]s

denirroberto
denirroberto

Cara não é bem isso, na verdade eu preciso que ele detecte a linha que está marcada para tirar o css caso outra linha seja clicada, eu consigo fazer isso assim:

function desLinha() {
    trs = document.getElementsByTagName('td');
    nClick = 0;

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

        trs[i].onclick=function() {
            if (nClick == 0) {
            nClick = 1;
            this.parentNode.style.color = '#FFFFFF';
            this.parentNode.style.backgroundColor = '#FF6D00';
            } else {
            nClick = 0;
            this.parentNode.style.color = '';
            this.parentNode.style.backgroundColor = '';
            }
        }
    }
}

Assim ele funciona mas ele tem algumas incógnitas devido ao valor do click e ele permite marcar mais de uma na verdade somente quero marcar uma e quando clicar em outra desmarcar uma.

R
rodrigo_web

faz o seguinte cria uma variavel global e alimente ela com a td clicada, depois é só ticar as cores da td ex:

var tdClicada
function desLinha() {   
    trs = document.getElementsByTagName('td');   
    nClick = 0;   
  
    for (i=0; i<trs.length; i++) {   
  
        trs[i].onclick=function() {

/* --------------------------------------------- */
   if(typeof tdClicada != "undefined"){
tdClicada.style.color = '';   
            tdClicada.style.backgroundColor = ''; 
}
tdClicada = this;
/* --------------------------------------------- */

            if (nClick == 0) {   
            nClick = 1;   
            this.style.color = '#FFFFFF';   
            this.style.backgroundColor = '#FF6D00';   
            } else {   
            nClick = 0;   
            this.style.color = '';   
            this.style.backgroundColor = '';   
            }   
        }   
    }   
}
R
rodrigo_web

se vc esta alterando a cor da td então tem que tirar o parentNode…

denirroberto
denirroberto

Cara acho que não estou sabendo montar, do jeito que colocou deu pau, dai adaptei assim:

var trClicada;

function desLinha() {
    var trs = document.getElementsByTagName('tr');
    nClick = 0;

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

        trs[i].onclick=function() {
            
            if(typeof trClicada != "undefined"){
                trClicada.style.color = '';
                trClicada.style.backgroundColor = '';
            } else if (nClick == 0) {
                nClick = 1;
                this.style.color = '#FFFFFF';
                this.style.backgroundColor = '#FF6D00';
            } else {
                nClick = 0;
                this.style.color = '';
                this.style.backgroundColor = '';
            }
            trClicada = this;
        }
    }
}

No primeiro click ele até funciona, marca a linha belezinha, só que quando clico em outra ele desmarca só que não marca mais nada.

Quero que ele faça tipo no dataTable do primefaces entende?

R
rodrigo_web

Desculpe, eu estava com pressa para sair então não li o código direito

mas tente assim

var trClicada;   
  
function desLinha() {   
    var trs = document.getElementsByTagName('tr');   
     
  
    for (i=0; i<trs.length; i++) {   
  
        trs[i].onclick=function() {   
            // retira a cor da linha 
            if(typeof trClicada != "undefined"){   
                trClicada.style.color = '';   
                trClicada.style.backgroundColor = '';   
            } 
           // se a trClicada for diferente da tr atual entao colore 
           if(trClicada != this){
              this.style.color = '#FFFFFF';   
              this.style.backgroundColor = '#FF6D00';
            }   
            trClicada = this      
        }   
    }   
}
denirroberto
denirroberto

Puts velho, funcionou perfeitamente :smiley:
Valeu mesmo, só tem um problema, como carrego ele pelo body do meu template, e uso composições para montar as outras páginas, como faço para especificar onde ele será usado, ou seja, somente para usar nos dataTable, pois assim ele funciona para todas as tags tr… :smiley: :smiley: :smiley: :smiley: :smiley: :smiley:

denirroberto
denirroberto

Galera mais uma dúvida que acho que vocês pode me ajudar, tenho uma DIV com um componente h:messages onde carrega todas as mensagens de retorno do sistema, porém elas aparecem e nçao ocultam, por isso joguei dentro da DIV, agora preciso que sempre que elas aparecerem depois de alguns segundos ela auto oculte.

Exemplo ao clicar no botão ela aparece e fica por 5 segundos depois oculta.

Criado 1 de setembro de 2010
Ultima resposta 10 de nov. de 2011
Respostas 17
Participantes 5

Topicos relacionados

Compilar e executar uma classe java pelo prompt do windows 13 respostas [RESOLVIDO] Como executar função JavaScript após página carregada 13 respostas Java.lang.OutOfMemoryError: Java heap space - Como resolver? 11 respostas Como consultar CPF na Receita Federal usando Web Service? 22 respostas Como acessar localhost de forma externa? [RESOLVIDO] 13 respostas
Alura Git Flow: entenda o que é, como e quando utilizar Entenda o que é Git Flow, como funciona seu fluxo com branches como Master, Develop, Feature, Release e Hotfix, além de vantagens e desvantagens.
Casa do Codigo Desmistificando WebAssembly: Alta performance,... Por Raphael Amorim — Casa do Codigo