jQuery addClass example

Change class name on click in jQuery

by Anjana Silva

HTML

<table class="tb3">
  <tr>
    <td><input class="Qty" type="text"/></td>
    <td><input class="Rate" type="text" value="100"/></td>
    <td><input class="Value" type="text"/></td>
  </tr>
  <tr>
    <td><input class="Qty" type="text"/></td>
    <td><input class="Rate" type="text" value="200"/></td>
    <td><input class="Value" type="text"/></td>
  </tr>
  <tr>
    <td><input class="Qty" type="text"/></td>
    <td><input class="Rate" type="text" value="300"/></td>
    <td><input class="Value" type="text"/></td>
  </tr>
</table>

JavaScript

$(document).on('keydown','input', function ()  {


    $('.Qty').on("input change",function(){
        var $row = $(this).closest("tr");
        var price = 0;
        var total = 0;

        $('.tb3').each(function() {

            var qty = $($row).closest('tr').find('.Qty').val();
             var rate = $($row).closest('tr').find('.Rate').val();
             var price =  qty * rate;
               $(this).find('.Value').val(price);
            total += parseFloat(price);
              });
         $('#TieTotal').val(total.toFixed(2));
    });

    $('.Value').on(function(){
                $('.tb3').each(function() {
             });
        $('#TieTotal').val(total.toFixed(2));
    });
    });