Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Dúvidas sobre jquery

por Cezar Augusto Maruca
| 499.8k xp | 29 posts

Oi boa noite estou com dúvidas no jquery. Tenho uma tabela com valores e não consigo ao clicar no botão aparecer um valor por vez, ao clicar só aparece o último valor da tabela. Código feito e esse aqui

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

    <title>Cadastro Usuário</title>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>    
<body class="posicaoForm">

    <fieldset class="border p-2 borderCampos">
        <legend class="w-auto">Produtos</legend>
            <form method="post" action="" id="ajax_form">

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col"></th>
                            <th scope="col">Associado</th>
                            <th scope="col">Não associado</th>
                            <th scope="col">Estudante</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">Produto A</th>
                        <td>R$100</td>
                        <td>R$200</td>
                        <td>R$50</td>
                    </tr>
                    <tr>
                        <th scope="row">Produto B</th>
                        <td>R$300</td>
                        <td>R$400</td>
                        <td>R$150</td>
                    </tr>
                    <tr>
                        <th scope="row">Produto C</th>
                        <td>R$500</td>
                        <td>R$600</td>
                        <td>R$250</td>
                    </tr>
                    </tbody>
                </table>
                <button class='produto btn btn-primary'>Produtos Associado</button>
                <button class='produto1 btn btn-primary'>Produtos Não Associado</button>
                <button class='produto2 btn btn-primary'>Produtos Estudante</button>

            </form>
    </fieldset>
    <br />
    <div id="resultado"></div>
    <script>
    $('.produto').on('click', function(){

      var lista = $('td:nth-child(2)');

      $.each(lista, function(index,item){

        valor = $(item).text();
        trocar = valor.replace(",",".");
        //alert(trocar);
        $("#resultado").html(lista);
      });
    });

    $('.produto1').on('click', function(){

      var lista = $('tr > td:nth-child(3)');

      $.each(lista, function(index,item){

        valor = $(item).text();
        trocar = valor.replace(",",".");
        alert(trocar);

      });
    });

    $('.produto2').on('click', function(){

      var lista = $('tr > td:nth-child(4)');

      $.each(lista, function(index,item){

        valor = $(item).text();
        trocar = valor.replace(",",".");
        alert(trocar);

      });
    });
</script>

</body>

Aguardo resposta

7 respostas
por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

Oi Cezar tudo bem?

Quando você coloca um botão dentro de um formulário o navegador subentende que aquele botão é para submeter o formulário. Então dentro do button tem que colocar o atributo type="button"

Segue código:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</html>


<title>Cadastro Usuário</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body class="posicaoForm">

    <fieldset class="border p-2 borderCampos">
        <legend class="w-auto">Produtos</legend>
        <form method="post" action="" id="ajax_form">

            <table class="table">
                <thead>
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">Associado</th>
                        <th scope="col">Não associado</th>
                        <th scope="col">Estudante</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">Produto A</th>
                        <td>R$100</td>
                        <td>R$200</td>
                        <td>R$50</td>
                    </tr>
                    <tr>
                        <th scope="row">Produto B</th>
                        <td>R$300</td>
                        <td>R$400</td>
                        <td>R$150</td>
                    </tr>
                    <tr>
                        <th scope="row">Produto C</th>
                        <td>R$500</td>
                        <td>R$600</td>
                        <td>R$250</td>
                    </tr>
                </tbody>
            </table>
            <button type="button" class='produto btn btn-primary'>Produtos Associado</button>
            <button type="button" class='produto1 btn btn-primary'>Produtos Não Associado</button>
            <button type="button" class='produto2 btn btn-primary'>Produtos Estudante</button>

        </form>
    </fieldset>
    <br />
    <div id="resultado"></div>
    <script>
        $('.produto').on('click', function () {

            var lista = $('td:nth-child(2)');

            $.each(lista, function (index, item) {

                valor = $(item).text();
                trocar = valor.replace(",", ".");
                //alert(trocar);
                $("#resultado").html(lista);
            });
        });

        $('.produto1').on('click', function () {

            var lista = $('tr > td:nth-child(3)');

            $.each(lista, function (index, item) {

                valor = $(item).text();
                trocar = valor.replace(",", ".");
                alert(trocar);

            });
        });

        $('.produto2').on('click', function () {

            var lista = $('tr > td:nth-child(4)');

            $.each(lista, function (index, item) {

                valor = $(item).text();
                trocar = valor.replace(",", ".");
                alert(trocar);

            });
        });
    </script>

</body>

Espero ter ajudado!!!

por Cezar Augusto Maruca
| 499.8k xp | 29 posts

Boa tarde não e bem isso que teria que fazer o código. O código teria que fazer a seguinte operação. Ao clicar no botão teria que aparecer um valor por vez na linha de baixo e não aparecer todos na linha de baixo. E também ao click no botão os valores continuar na tabela e não sumir da tabela como está acontecendo Como faço isso, ao clicar no botão aparece um valor por vez e não saia o valor da tabela?

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

É que esse método html está trocando os elementos de lugar. Usei um metodo nativo do javascript que não faz essa troca.

   $('.produto').on('click', function () {

            var lista = $('td:nth-child(2)');

            $.each(lista, function (index, item) {

                valor = $(item).text();
                trocar = valor.replace(",", ".");
                //alert(trocar);
                document.querySelector("#resultado").innerHTML=document.querySelector("#resultado").innerHTML+valor+"<br>";
            });
        });
por Cezar Augusto Maruca
| 499.8k xp | 29 posts

Obrigado pela resposta. Resolveu o problema metade, porque ao clicar aparece todos os valores de uma vez, precisava que ao clicar aparece 1 valor por vez, como clicar 1 vez aparece o 1 valor que e 100, 2 vez o valor 300 até o 3 valor que e 500. Aguardo resposta, mais obrigado já resolveu metade do problema.

solução!
por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

Disponha, eu amo programar.

Veja se é assim que precisa.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</html>


<title>Cadastro Usuário</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body class="posicaoForm">

    <fieldset class="border p-2 borderCampos">
        <legend class="w-auto">Produtos</legend>
        <form method="post" action="" id="ajax_form">

            <table class="table">
                <thead>
                    <tr>
                        <th scope="col"></th>
                        <th scope="col">Associado</th>
                        <th scope="col">Não associado</th>
                        <th scope="col">Estudante</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">Produto A</th>
                        <td>R$100</td>
                        <td>R$200</td>
                        <td>R$50</td>
                    </tr>
                    <tr>
                        <th scope="row">Produto B</th>
                        <td>R$300</td>
                        <td>R$400</td>
                        <td>R$150</td>
                    </tr>
                    <tr>
                        <th scope="row">Produto C</th>
                        <td>R$500</td>
                        <td>R$600</td>
                        <td>R$250</td>
                    </tr>
                </tbody>
            </table>
            <button type="button" class='produto btn btn-primary'>Produtos Associado</button>
            <button type="button" class='produto1 btn btn-primary'>Produtos Não Associado</button>
            <button type="button" class='produto2 btn btn-primary'>Produtos Estudante</button>

        </form>
    </fieldset>
    <br />
    <div id="resultado"></div>
    <script>
        $('.produto').on('click', function () {

            var lista = $('td:nth-child(2)');
            for (k=0;k<lista.length;k++){
                valor=lista[k].innerText;
                trocar = valor.replace(",", ".");

                 if (lista[k].getAttribute("usado")!="sim"){
                    document.querySelector("#resultado").innerHTML = valor ;
                    lista[k].setAttribute("usado","sim");
                    break;
                 }

            }

        });

        $('.produto1').on('click', function () {

            var lista = $('tr > td:nth-child(3)');

            for (k=0;k<lista.length;k++){
                valor=lista[k].innerText;
                trocar = valor.replace(",", ".");

                 if (lista[k].getAttribute("usado")!="sim"){
                    document.querySelector("#resultado").innerHTML = valor ;
                    lista[k].setAttribute("usado","sim");
                    break;
                 }

            }
        });

        $('.produto2').on('click', function () {

            var lista = $('tr > td:nth-child(4)');

            for (k=0;k<lista.length;k++){
                valor=lista[k].innerText;
                trocar = valor.replace(",", ".");

                 if (lista[k].getAttribute("usado")!="sim"){
                    document.querySelector("#resultado").innerHTML = valor ;
                    lista[k].setAttribute("usado","sim");
                    break;
                 }

            }
        });
    </script>

</body>
por Cezar Augusto Maruca
| 499.8k xp | 29 posts

Obrigado resolveu meu problema com o jquery. Abs para todos ai

por André Victor Ruiz Pedroso
| 2102.7k xp | 3838 posts
Moderador Analista Pleno

Disponha e bons estudos!!!