jQuery addClass example

Change class name on click in jQuery

by Anjana Silva

HTML

<table class="tb3">
  <tr>
    <td><input class="Qty" type="text" value="1"/></td>
    <td><input class="Rate" type="text" value="100"/></td>
    <td><input class="Value" type="text"/></td>
    <td><button type="button" class="remove3">X</button></td>
  </tr>
  <tr>
    <td><input class="Qty" type="text" value="2"/></td>
    <td><input class="Rate" type="text" value="200"/></td>
    <td><input class="Value" type="text"/></td>
    <td><button type="button" class="remove3">X</button></td>
  </tr>
  <tr>
    <td><input class="Qty" type="text" value="3"/></td>
    <td><input class="Rate" type="text" value="300"/></td>
    <td><input class="Value" type="text"/></td>
    <td><button type="button" class="remove3">X</button></td>
  </tr>
</table>
<div>
Total : <input type="text" id="TieTotal" />
</div>

JavaScript

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

        $('.tb3 tr').each(function() {
             var qty = $(this).find('.Qty').val();
             var rate = $(this).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));
    });
		$('.Qty').trigger('change');
    
    $('.remove3').click(function ()  {
    	var trIndex = $(this).closest("tr").index();
      if (trIndex > 0) {
          $(this).closest("tr").remove();
          $('.Qty').trigger('change');
      } else {
          alert("Sorry!! Can't remove first row!");
    	}      
    });

});