Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

decimo

Jquery selecionando a linha com tabela, como usar o seletor this?

Por , em Javascript

Recommended Posts

decimo    0

decimo
Postado

Pessoal, estou com duvida simples que estou quebrando a cabeça e não consegui resolver. Tenho a seguinte tabela:

 

<!DOCTYPE html>
<html>
<head>

<title>Loja</title>

<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
    <body>
      <table>
          <thead>
            <tr>
             <th>Produto</th>
             <th>Pequena</th>
             <th>Media</th>
             <th>Grande</th>
             <th>Extra Grande</th>
             <th></th>
             <th>Desconto</th>
            </tr>
          </thead>
          <tbody>
            <tr>
               <td>Camisa Masculina simples</td>
               <td>10,00</td>
               <td>20,00</td>
               <td>30,00</td>
               <td>40,00</td>
               <td><button>Aplicar</button></td>
               <td><input></td>
            </tr>
             <tr>
               <td>Camisa Feminina simples</td>
               <td>10,00</td>
               <td>20,00</td>
               <td>30,00</td>
               <td>40,00</td>
               <td><button>Aplicar</button></td>
               <td><input></td>
            </tr>
            <tr>
               <td>Camisa Masculina Polo</td>
               <td>10,00</td>
               <td>20,00</td>
               <td>30,00</td>
               <td>40,00</td>
               <td><button>Aplicar</button></td>
               <td><input></td>
            </tr>
            <tr>
               <td>Camiseta Feminina Gola V</td>
               <td>10,00</td>
               <td>20,00</td>
               <td>30,00</td>
               <td>40,00</td>
               <td><button>Aplicar</button></td>
               <td><input></td>
            </tr>

          </tbody>
      </table>
    </body>

    <script type="text/javascript">
        
    </script>

</html>


Ao clicar no button, como posso fazer um script, usando o jquery com seletor $(this), para que o desconto percentual, seja aplicado em todo os preços da linha daquele botão?

Agradeço desde já.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

decimo    0

decimo
Postado

Legal, já conhecia o w3scholls, estou há tempos sem mexer com programação e estou meio enferrujado. Pretendo fazer uma boa revisada. Queria mais é um exemplo para ter como referencia. Tem algum link no w3scholls que explica como usar o o seletor $(this)?

$("button").click(function(){
        $(this).function(
           var um = $(td.eq(2)).val();
           var dois = $(td.eq(3)).val();
           var tres = $(td.eq(4)).val();
           var quatro = $(td.eq(5)).val();

           var desconto = $(td.eq(7)).val();
           var um = Number(um) - ((Number(um) * Number(desconto)) / 100) ;
           .

           .

           $(td.eq(2)).val(um);
          .

          .
         );
});

Imagino que seria algo do tipo... a duvida é como selecionar apenas a células da linha do botão clicado, selecionar o imput com o valor de desconto daquela mesma linha e aplicar o desconto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

Aí está!  

  

    <script type="text/javascript">
        $('button').click(function(){
          var P  = $(this).parent().siblings(':nth-of-type(2)');
          var M  = $(this).parent().siblings(':nth-of-type(3)');
          var G  = $(this).parent().siblings(':nth-of-type(4)');
          var X  = $(this).parent().siblings(':nth-of-type(5)');
          var D  = $(this).parent().siblings(':nth-of-type(7)').children('input').val();
          P.html(aplicaDesconto(P.html(),D));
          M.html(aplicaDesconto(M.html(),D)); 
          G.html(aplicaDesconto(G.html(),D)); 
          X.html(aplicaDesconto(X.html(),D)); 
        });
      
      	function aplicaDesconto(valor,desconto){
          valor = valor.replace(',','.');
          var result = valor * (1-(desconto/100));
          return result.toFixed(2);
        }
    </script>

Live Demo:

http://codepen.io/Eziquiel/pen/yMZNge?editors=1000

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eziquiel    96

Eziquiel
Postado

O selector $(this) retorna ele mesmo.

 

Imagine o seguinte: 

<button>Botão 1</button>
<button>Botão 2</button>
<button>Botão 3</button>
<button>Botão 4</button>
<button>Botão 5</button>
<button>Botão 6</button>
<button>Botão 7</button>
<button>Botão 8</button>
<button>Botão 9</button>
<button>Botão 10</button>

Aqui o seu script: 

$("button").click(function(){
    $(this).prop('disabled',true);
});

Aqui o $(this) é o elemento que chamou a função, no caso o "button". Então, no "button" que você clicar o seletor S(this) fará com que ele mesmo receba a propriedade "disabled".

 

Experimente aqui:

http://codepen.io/Eziquiel/pen/JWxKpz?editors=1010

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito