1

Eu estou com problemas, não tenho muita experiencia com JavaScript e jQuery e preciso fazer o seguinte.

Tenho uma tabela, a qual cada linha é um produto e tem um valor.

Eu preciso adicionar uma porcentagem a este valor de acordo com o valor de um slider.

Então por exemplo, se o custo de um produto é 0,10, se eu mover o slider para 10, adicionar 10% neste valor e atualizar o mesmo.

O problema é que com o código abaixo eu não estou conseguindo fazer para cada linha.

Já tentei de tudo, mas o máximo que cheguei é onde pegou a primeira linha, porém adiciona este valor em todas as linhas.

Eu precisava de uma maneira para mover o slider e apenas modificar a p tag daquela linha e não das outras.

também preciso ter esta função em todas as linhas (atualmente só está funcionando na primeira).

Estou usando uma função em JavaScript para adicionar os itens na tabela, código abaixo.

Bem provável que seja uma solução simples, conto com o apoio dos experts.

/*    myRange - Slider ID
    prod - table id;
    .teste -  classe a tag p onde tem o preço.
*/
    //slider
    $('#prod').on('click', '#myRange', function () {
        var slider = document.getElementById('myRange');
        slider.oninput = function() {
          $('.teste').closest("p").html(slider.value);
          console.log(slider.value);
          //output.innerHTML = slider.value;
          }
      } );
  // Listar todos os produtos
  $("#add-all").click(function() {
    // Listar todos os itens.
    for (i = 0; i < Items.length; i++) {
      var id = Items[i].id;
      var nome = Items[i].Nome;
      var descri = Items[i].Descricao;
      var emb = Items[i].Embalagem;
      var lab = Items[i].Laboratorio;
      var gen = Items[i].Generico;
      var rsm = Items[i].RSM;
      var rsmnew = rsm.slice(0, 9);
      var val = Items[i].Vunit;
      var valF = "TBD";
      var markup = "<tr><td>" + nome + "</td>" +
        "<td>" + descri + "</td>" +
        "<td>" + emb + "</td>" +
        "<td>" + lab + "</td>" +
        "<td>" + gen + "</td>" +
        "<td><a target='_blank' href='http://www.smerp.com.br/anvisa/?ac=out&anvisaId=" + rsmnew + "'>" + rsm + "</a></td>" +
        "<td><p class='custo' id='" + id + "'>" + val + "</p><a class='editar' data-toggle='modal' data-nome='" + nome + "' data-id='" + id + "' data-descri='" + descri + "' data-target='#changePrice'><i class='fas fa-edit iconeE' title='Editar'></i></a></td>" +
        "<td><p class='teste'>" + valF + "</p><a class='remover'><i class='fas fa-minus-circle icone' title='Ocultar'></i></a><br><input style='width:70px;' type='range' id='myRange' min='-20' max='60' value='0' class='custom-range'></td>'";
      var markup1 = "<tr><td>" + nome + "</td>" +
        "<td>" + descri + "</td>" +
        "<td>" + emb + "</td>" +
        "<td>" + lab + "</td>" +
        "<td>" + gen + "</td>" +
        "<td><a target='_blank' href='http://www.smerp.com.br/anvisa/?ac=out&anvisaId=" + rsmnew + "'>" + rsm + "</a></td>" +
        "<td>" + val + "</td>" +
        "<td><p class='teste'>" + valF + "</p><a class='remover'><i class='fas fa-minus-circle icone' title='Ocultar'></i></a><br><input style='width:70px;' type='range' id='myRange' min='-20' max='60' value='0' class='custom-range'></td>'";
      if ($("#userType").attr("value") == "user") {
        $("table tbody").append(markup1);
      }
      if ($("#userType").attr("value") == "adm") {
        $("table tbody").append(markup);
      }
    }
  });

table

5
  • Bem vindo ao Stack Overflow em Português. Por favor clique em editar e traduza a pergunta. Commented 30/07/2019 às 12:57
  • Cara coloca pelo menos o HTML ai tb, vai ajudar a te responder. Se a estrutura do html dificulta um pouco as coisas
    – hugocsl
    Commented 30/07/2019 às 13:08
  • Poderia coloca código html. Commented 30/07/2019 às 13:08
  • Erro está classe. Você está mudando todas as elas,recomendação é usar id. Ou usar qual index ela está. Commented 30/07/2019 às 13:21
  • Isso me resolveu um problema. Agora está funcionando apenas para a primeira linha, ideias de como posso fazer para funcionar em todas linhas? Commented 30/07/2019 às 13:24

1 Resposta 1

1

O primeiro problema é que você está repetindo o id #myRange. Só aí já vai dar problema no seletor do evento click. Um id deve ser único na página. Quando você vai usar vários elementos semelhantes, você deve usar class em vez de id. Então troque o id="myRange" por class="myRange".

Outra coisa que irá facilitar é adicionar um data-* na td que possui o valor. Pode ser data-val, assim:

"<td data-val='"+val+"'>" + val + "</td>" +

Como você quer alterar o val que está dentro da td, o data-val continuará estático e de onde você irá pegar o valor para fazer o cálculo e jogar dentro da td.

O que você tem que fazer é pegar a td pai do slider range e buscar a td anterior. Essa td anterior é de onde você irá pegar o valor do item e alterar o texto.

E já que está usando jQuery, não precisa misturar com JavaScript puro. Pode fazer tudo na sintaxe do jQuery mesmo, desta forma:

$(document).on("input", ".myRange", function(){
   var valor = $(this).closest("td").prev("td").data("val");
   valor += valor * this.value/100;
   $(this).closest("td").prev("td").text(valor);
   // pode apagar as duas linhas abaixo
   console.clear();
   console.log(this.value);
});

Um exemplo da funcionalidade:

var Items = [
   {
      id: "1", Vunit: "10"
   },
   {
      id: "2", Vunit: "30"
   }
];
//Listar todos os produtos
  $("#add-all").click(function() {
    // Listar todos os itens.
    for (i = 0; i < Items.length; i++) {
      var id = Items[i].id;
      var nome = Items[i].Nome;
      var descri = Items[i].Descricao;
      var emb = Items[i].Embalagem;
      var lab = Items[i].Laboratorio;
      var gen = Items[i].Generico;
      var rsm = Items[i].RSM;
      var rsmnew = "";
      var val = Items[i].Vunit;
      var valF = "TBD";
      var markup = "<tr><td>" + nome + "</td>" +
        "<td>" + descri + "</td>" +
        "<td>" + emb + "</td>" +
        "<td>" + lab + "</td>" +
        "<td>" + gen + "</td>" +
        "<td><a target='_blank' href='http://www.smerp.com.br/anvisa/?ac=out&anvisaId=" + rsmnew + "'>" + rsm + "</a></td>" +
        "<td data-val='"+val+"'><p class='custo' id='" + id + "'>" + val + "</p><a class='editar' data-toggle='modal' data-nome='" + nome + "' data-id='" + id + "' data-descri='" + descri + "' data-target='#changePrice'><i class='fas fa-edit iconeE' title='Editar'></i></a></td>" +
        "<td><p class='teste'>" + valF + "</p><a class='remover'><i class='fas fa-minus-circle icone' title='Ocultar'></i></a><br><input style='width:70px;' type='range' class='myRange' min='-20' max='60' value='0' class='custom-range'></td>'";


      var markup1 = "<tr><td>" + nome + "</td>" +
        "<td>" + descri + "</td>" +
        "<td>" + emb + "</td>" +
        "<td>" + lab + "</td>" +
        "<td>" + gen + "</td>" +
        "<td><a target='_blank' href='http://www.smerp.com.br/anvisa/?ac=out&anvisaId=" + rsmnew + "'>" + rsm + "</a></td>" +
        "<td data-val='"+val+"'>" + val + "</td>" +
        "<td><p class='teste'>" + valF + "</p><a class='remover'><i class='fas fa-minus-circle icone' title='Ocultar'></i></a><br><input style='width:70px;' type='range' class='myRange' min='-20' max='60' value='0' class='custom-range'></td>'";
        $("table tbody").append(markup1);
    }
  });

$(document).on("input", ".myRange", function(){
   var valor = $(this).closest("td").prev("td").data("val");
   valor += valor * this.value/100;
   $(this).closest("td").prev("td").text(valor);
   // pode apagar as duas linhas abaixo
   console.clear();
   console.log(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tbody>
   </tbody>
</table>
<button id="add-all">Add</button>

2
  • Resolvido meu caro. Desculpe a ignorância em misturar tudo, estou ainda aprendendo . rs Commented 30/07/2019 às 18:19
  • Tranquilo, jovem! A gente vai aprendendo :D.... Agora é só marcar ✔ na resposta se resolveu. Abs!
    – Sam
    Commented 30/07/2019 às 18:23

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 .