2

Como resolver este problema, vi que existe soluções em ajax mas eu não consegui desenvolver, o que eu preciso é mudar a cor da td de uma table sem ter que atualizar a página, a mudança de cor da td deve acontecer quando eu clicar no radio button que tem como valor amarelo e logo após clicar o botão submit ele processar e mudar a cor pela qual escolhi, a cor deve mudar somente nesta td as demais devem permanecer as cores já atribuídas.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    <table width="900" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td bgcolor="#00FF00">
                <form id="form1" name="form1" method="post" action="">
                    <input type="radio" name="radio" id="radio" value="verde" />
                    Verde
                    <input type="radio" name="radio" id="radio2" value="azul" />
                    Azul
                    <input type="radio" name="radio" id="radio3" value="amarel" />
                    Amarelo
                    <input type="radio" name="radio" id="radio4" value="rosa" />
                    Rosa 
                    <input type="submit" name="button" id="button" value="Submit" />
                </form>
            </td>
        </tr>
        <tr>
            <td bgcolor="#0099FF">
                    <form id="form2" name="form2" method="post" action="">
                    <input type="radio" name="radio" id="radio" value="verde" />
                    Verde
                    <input type="radio" name="radio" id="radio2" value="azul" />
                    Azul
                    <input type="radio" name="radio" id="radio3" value="amarel" />
                    Amarelo
                    <input type="radio" name="radio" id="radio4" value="rosa" />
                    Rosa 
                    <input type="submit" name="button" id="button" value="Submit" />  
                </form>
            </td>
        </tr>
        <tr>
            <td bgcolor="#FFFF00">
                <form id="form3" name="form3" method="post" action="">
                    <input type="radio" name="radio" id="radio" value="verde" />
                    Verde
                    <input type="radio" name="radio" id="radio2" value="azul" />
                    Azul
                    <input type="radio" name="radio" id="radio3" value="amarel" />
                    Amarelo
                    <input type="radio" name="radio" id="radio4" value="rosa" />
                    Rosa 
                    <input type="submit" name="button" id="button" value="Submit" />
                </form>
            </td>
        </tr>
    </table>
    </body>
    </html>
1
  • Você precisa que a mudança ocorra depois do processamento no servidor (com a confirmação do servidor, via Ajax) ou precisa modificar a cor apenas no cliente (antes ou depois da requisição ajax)?
    – Wakim
    Commented 5/06/2014 às 1:30

1 Resposta 1

3

Eu fiz um exemplo para alterar o td com algumas modificações, coloquei o value em inglês e mudei de submit para o tipo button para poder visualizar sem sair da página.

JavaScript

$('input[type=button]').click(function(){    
    cor = $(this).parent().find('input[type=radio]:checked').val();    
    $(this).parent().parent().css('background', cor);
});

Explicando, ao clicar no botão que envia o formulário, é chamado o click() que pega o value do radio selecionado e altera a cor do td.

Veja aqui o exemplo.

3
  • Você poderia otimizar essa rotina cacheando $(this).parent() já que ele é usado duas vezes. ;) Commented 5/06/2014 às 16:14
  • Exatamente o que eu precisava, deu certo mas me deparei com um problema, e se fosse para mudar a cor do da tr como ficaria ? Commented 6/06/2014 às 0:53
  • não sei se estou certa mas observei que colocando mais um .parent() ele muda a cor da tr exemplo $(this).parent().parent()..parent().css('background', cor); Commented 6/06/2014 às 1:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .