How my Jquery Function work on whole table?-CodePudding

Asslam o Alaikum.... I have a problem in my code...my jquery code is only implement of the first row of table not on others....please check my code

   <tr>
                <td><?php echo $row['serial no.'] ?></td>
                <td><?php echo $row['pname'] ?></td>
                <td><input type="text"  id="prate"  name = "uprice" value="<?php echo $prate = $row['uprice'];?>"></td>
                <td> <input type="number"  id="pqty" name = "quantity" value ="<?php $quant = ""; echo $quant; ?>"></td>
                <td> <input type="text"  id="pTotal" name = "price" value = "<?php $tprice = ""; echo $tprice; ?>" ></td>
    </tr>

this is my html code....

<script>
              $("#prate").keyup(function(){
                // console.log('presssed');

          var prate = document.getElementById('prate').value;
          var pqty = document.getElementById('pqty').value;
          var ptotal = parseInt(prate) * parseInt(pqty);

          document.getElementById('pTotal').value = ptotal;
        });

        $("#pqty").keyup(function(){
          // console.log('presssed');
          var prate = document.getElementById('prate').value;
          var pqty = document.getElementById('pqty').value;
          var ptotal = parseInt(prate) * parseInt(pqty);

          document.getElementById('pTotal').value = ptotal;
        });
        </script>

and this is jquery...plz help me out

CodePudding user response：

As you know, id must be unique on whole page. So on each row and items, either you have make unique id (Which will be complicated to bind event), so you can go with class or as below script for binding the events.

<script>
        $('input[name="uprice"]').keyup(function(){
        
          var prate = $(this).val();
          var pqty = $(this).parent().next().find('input[name="quantity"]').val();
          var ptotal = parseInt(prate) * parseInt(pqty);

         $(this).parent().next().next().find('input[name="price"]').val(ptotal);
        });

        $('input[name="quantity"]').keyup(function(){
          var prate = $(this).parent().prev().find('input[name="uprice"]').val();;
          var pqty = $(this).val();
          var ptotal = parseInt(prate) * parseInt(pqty);

          $(this).parent().next().find('input[name="price"]').val(ptotal);
        });
</script>

Not have tested but should help you.

CodePudding user response：

Use class selector (not id selector) and each method to emplement your desired commands on all rows.

CodePudding user response：

ID must be unique, instead put a class as a reference for each table data and try each method:

 $('.pqty').each(function(i, element){
    $(element).keyup(function(evt) { 
        /* anything */
    })
 })