Change the value of a Slider in each table row

Question

I’m in trouble, I don’t have much experience with Javascript and jQuery and need to do the following.

I have a table, each row is a product and has a value.

I need to add a percentage to this value according to the value of a slider.

So for example, if the cost of a product is 0.10, if I move the slider to 10, add 10% to this value and update the same.

The problem is that with the code below I’m not getting to do for every line.

I’ve tried everything, but the most I got is where you got the first line, but add this value on all lines.

I needed a way to move the slider and just modify the p tag of that line and not the others.

also need to have this function on all lines (currently only working on the first).

I am using a Javascript function to add the items in the table, code below.

Most likely a simple solution, I count on the support of 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);
      }
    }
  });

Answer 1

The first problem is that you are repeating the id #myRange. Only then will problem in the event selector click. An id should be unique on the page. When you will use several similar elements, you should use class instead of id. Then change the id="myRange" for class="myRange".

Another thing that will make it easier is to add a data-* in td that has the value. It can be data-val, thus:

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

How do you want to change the val that is inside the td, the data-val will continue static and from where you will pick up the value to do the calculation and play inside the td.

What you have to do is take the td slider father range and fetch the td previous. That td previous is where you will take the value of the item and change the text.

And since you’re using jQuery, you don’t need to mix with pure Javascript. You can do everything in jQuery syntax anyway, this way:

$(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);
});

An example of functionality:

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>