JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<table class="table chqSummryTB" style="margin-top:10px"; border="1">
    <thead>
        <tr>
            <th colspan="3"></th>
            <th colspan="2" style="text-align:right;">
                Amount </br>
                <input type="text" id="partyTotAmount" readonly="readonly"  
                 value="5000.00" 
                style="border:0px ;text-align:right; font-size:15px" /> 
                <input type="hidden" id="paySum" />
            </th>
        <th style="text-align:right;">
            No of cheques </br>
           <input type="text" name="totChqRow2" id="totChqRow" readonly="readonly"  value="0" 
            style="width:100%; border:0px ;text-align:right; font-size:15px" /> 
        </th>
        <th style="text-align:right;width:15%">
            Selected Total Amount</br> 
           <input type="text" id="SelcTotAmount" readonly="readonly" value="0.00"
            style="border:1px; width:100%; text-align:right; font-size:15px" /> 
      </th>
    </tr>
    <tr style="background: brown;color: #fff;">                
        <th>No </th>
        <th>Cheque No</th>
        <th>Customer Name</th>
        <th>Ref No</th>
        <th>Type</th>
        <th>Amount</th>
        <th>Date</th>                     
    </tr>
    </thead>

    <tbody style="overflow:scroll; height:500px;">    
        <tr class="checked">
            <td width="3%" class="checkBxTD">							
                <input type="checkbox"  class="checked" data-value="2500" 
                value="2015-10-22||2000047083002||2500||Own||735||140-1562-100||31" name="ChqID[]" />
            </td>
            <td class="checkBxTD">2000047083002</td>
            <td class="checkBxTD">Cus 1</td>
            <td class="checkBxTD">3</td class="checkBxTD">
            <td class="checkBxTD">Own</td class="checkBxTD">
            <td style="text-align:right;" class="checkBxTD">2,500.00</td>
            <td class="checkBxTD">2015-10-22</td>

        </tr>
        <tr...

CSS

*{    
   font-size:11px
}

JavaScript

$(document).on('click', '.checked', function(){
	var count = 0;var sum = 0;

	//alert( $(this).closest('tr').find("input[type=checkbox]").prop('checked') );
	if($(this).closest('tr').find("input[type=checkbox]").prop('checked')){
		
		$(this).closest('tr').find("input[type=checkbox]").prop('checked', false);
		$(this).closest('tr').css('background-color','#FFF');
		$(this).closest('tr').css('color','#000');
		
		SelcTotAmount = parseFloat( $('#SelcTotAmount').val() );
		var checkVal = parseFloat( $(this).closest('tr').find("input[type=checkbox]").data("value") );
		$('#SelcTotAmount').val( SelcTotAmount - checkVal);
		//alert(checkVal);
		
	}else{
		
		partyTotAmount = parseFloat( $('#partyTotAmount').val() );
		var checkVal = parseFloat( $(this).closest('tr').find("input[type=checkbox]").data("value") );
		var yetPaid = parseFloat( $('#SelcTotAmount').val() );
		//console.log(checkVal +' === ' + yetPaid);
		allPAid = checkVal + yetPaid;
		
		if( allPAid > partyTotAmount){
			
			alert('Maximum payable amount exceeds, if you select this cheque!');	
			
		}else{	
		
			$(this).closest('tr').find("input[type=checkbox]").prop('checked', true);							
			$(this).closest('tr').css('background-color','rgba(3, 60, 107, 0.99)');
			$(this).closest('tr').css('color','#fff');
			
		}
		
	}
	
	$('.hiddnClas').remove();
	
	$(".checked:checked").each(function(){		
			
		count += 1;
		sum += parseFloat( $(this).data('value') );				
	
	});  

 
	$('#paySum').val( parseFloat($('#partyTotAmount').val() - sum).toFixed(2) );	
	$('#SelcTotAmount').val(sum.toFixed(2));	
	$('#totChqRow').val(count);
	$('#chqcount').val(count);
});