增量10后，总数变为NaN

Question

我有calculation table，添加10行后总数变为NaN。 我甚至尝试了Stackoverflow article中所述的建议。 我已经测试了一天超过一天，无法修复错误。我错过了什么？

jQuery(document).ready(function($){ 
    var counter = 2;

    $("#addItem").click(function () {
 
        if(counter>50){
                alert("You have reached the maximum items allowed (50)!");
                return false;
        }   
     
        var newTextBoxDiv = $(document.createElement('tr'))
             .attr("id", 'itemRow' + counter);
     
        newTextBoxDiv.after().html('<td class="first"><input placeholder="Charge # ' + counter + '" class="chrg" type="text" name="data[' + counter + '][0]" id="chrg' + counter + '" ></td>' + '<td><input placeholder="Item/Part # ' + counter + '" class="item" type="text" name="data[' + counter + '][1]" id="item' + counter + '" ></td>' + '<td><input placeholder="Description ' + counter + '" class="desc" type="text" name="data[' + counter + '][2]" id="desc' + counter + '" ></td>' + '<td style="text-align:center;"><input placeholder="Qty ' + counter + '" class="qty" type="text" name="data[' + counter + '][3]" id="qty' + counter + '" size="5" style="text-align:center;" /></td>' + '<td style="text-align:right;"><input placeholder="Cost ' + counter + '" class="cost" type="text" name="data[' + counter + '][4]" id="cost' + counter + '" size="10" style="text-align:right;" /></td>' + '<td style="text-align:right;"><span class="input-group-addon">$</span><input placeholder="Sub-Total ' + counter + '" class="stotal" type="text" name="stotal'+ counter + '" id="stotal'+ counter +'" size="10" style="text-align:right;" readonly /></td>');
     
        newTextBoxDiv.appendTo("#TextBoxesGroup");
     
        counter++;
     });

    $(document).on('keyup', '.cost', function(st){       
         // grab ID to get row number
        thisID = $(this).attr("id");
        rowNum = thisID.slice(-1); 
        
        //get Amount entered
        qty = $('#qty'+rowNum).val();
        //get QTY
        cost = $('#cost'+rowNum).val();        
       $('#stotal'+rowNum).val((qty*cost).toFixed(2));
        
      currentCount = counter-1;
      var tot = Math.round(0);
        $('.stotal').each(function() {
            tot += parseFloat($(this).val());            
        });
          
	   $('#preTotal').val((tot).toFixed(2));
	   $('#grand_total').val((tot).toFixed(2));
    });
	
//calculate preTotal
    $(document).on('focusin', '#shipping', function(pt){
	var selection = document.getElementById("addShip");
		if (selection.checked){
		$("#shipping").change(function(preTotal,shipping) { // input on change
		  var preTotal = document.getElementById('preTotal').value;
  		  var shipping = document.getElementById('shipping').value || 0;
		  var pTotal = parseFloat(shipping) + parseFloat(preTotal);		  
		  
		  document.getElementById('preTotal').value = (pTotal.toFixed(2));
		});
		} else {
		  var preTotal = document.getElementById('preTotal').value;
  		  var shipping = document.getElementById('shipping').value || 0;
		  var sTotal = parseFloat(preTotal);		  
		  
		  document.getElementById('preTotal').value = (sTotal.toFixed(2));
		}
	});

//calculate taxes and total
    $(document).on('focusin', '#taxTotal', function(tt){
	var selection = document.getElementById("addShip");
		//get field results		
		var preTotal = document.getElementById('preTotal').value || 0;
		var shipping = document.getElementById('shipping').value || 0;
		var taxTotal = document.getElementById('taxTotal').value || 0;
		var taxRate = document.getElementById('taxRate').value || 0;
		var gTotal = document.getElementById('grand_total').value || 0;

		$("#taxTotal").change(function() { // input on change
		  var tTotal = document.getElementById('taxTotal').value / document.getElementById('preTotal').value * 100;
		  document.getElementById('taxRate').value = (tTotal.toFixed(2));
		});

    });
	
//calculate total + taxes
    $(document).on('focusout', '#taxTotal', function(gt){
		var shipping = document.getElementById('shipping').value || 0;
		var tTotal = document.getElementById('taxTotal').value || 0;
		var gTotal = document.getElementById('grand_total').value;
		var fTotal = parseFloat(shipping) + parseFloat(tTotal) + parseFloat(gTotal);
		document.getElementById('grand_total').value = (fTotal.toFixed(2));
    });

});

}

function focusField() {
    $('#addItem').click(function(){
    $('.chrg').focus();
	});

th 				{padding: 2px 2px;}
td 				{padding: 2px 2px;}
input 			{padding: 0px 2px;}
#addItemBtn 	{}
input.filler 	{border-color:#fff;border-style:solid;}
.input-group-addon {
    padding: 2px 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
	box-shadow: inset 0 0  0 1px grey;
	border-right: 1px #eee solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TextBoxesGroup" style="width:100%;">
   <tr>
   		<th style="text-align:left;">Charge #</th>
        <th style="text-align:left;">Item/Part #</th>
        <th style="text-align:left;">Description</th>
        <th style="text-align:center;">Qty</th>
        <th style="text-align:right;">Cost</th>
        <th style="text-align:right;">Sub-total</th>
   </tr>
   <tr id="itemRow1">
        <td><input placeholder="Charge # 1" class="chrg" type="text" id="chrg1" autofocus /></td>
        <td><input placeholder="Item/Part # 1" class="item" type="text" id="item1" style="margin-bottom:0 !important" /></td>
        <td><input placeholder="Description 1" class="desc" type="text" id="desc1" /></td>
        <td style="text-align:center;"><input placeholder="Qty 1" class="qty" type="text" id="qty1" size="5" style="text-align:center;" /></td>
        <td style="text-align:right;"><input placeholder="Cost 1" class="cost" type="text" id="cost1" size="10" style="text-align:right;" /></td>
        <td style="text-align:right;"><span class="input-group-addon">$</span><input placeholder="Sub-Total 1" class="stotal" type="text" id="stotal1" size="10" style="text-align:right;" readonly /></td>
    </tr> 
</table>
<table style="width:100%;">
    <tr id="rowFiller">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input class="btn btn-primary" type="button" id="addItem" value="Add Item" size="10" style="float:right;" onclick="focusField()" /></td>
     </tr> 
     <!--<tr id="addItemBtn">
     	<td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="button" id="addItem" value="Add Item" style="float:right;" /></td>
     </tr>-->
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="text-align:right;">
        <label style="padding-right:5px;">remove shipping from taxable total
        <input type="checkbox" id="addShip" class="addShip" name="addShip" checked ></label>
        </td>    
    </tr>
     <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="text-align:right;">
        <label style="font-weight:bold;padding-right:5px;display:inline-block;">Shipping</label>
        <span class="input-group-addon">$</span>
        <input placeholder="$00.00" name="shipping" id="shipping" size="10" style="float:right;text-align:right;" />
        </td>
    </tr>
     <tr>
        <td></td>
        <td></td>
        <td style="text-align:right;">
        <label style="font-weight:bold;padding-right:5px;display:inline-block;">Pre-Total</label>
        <input name="preTotal" id="preTotal" size="10" style="float:right;text-align:right;" readonly /></td>
        <td></td>
        <td>
        </td>
        <td style="text-align:right;">
        <div style="text-align:right;display:inline;border-right:1px #ccc solid;margin-right:5px;">
        <label style="font-weight:bold;padding-right:5px;display:inline-block;">Tax</label>
        <input placeholder="00" class="taxRate" name="taxRate" id="taxRate" size="1" style="text-align:center;" />
        <label style="font-weight:bold;display:inline-block;">%</label>
        </div>
        <label style="font-weight:bold;padding-right:5px;display:inline-block;">Total Tax</label>
        <span class="input-group-addon">$</span><input placeholder="$00.00" name="taxTotal" id="taxTotal" size="10" style="float:right;text-align:right;" />
        </td>
    </tr>
     <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="text-align:right;font-weight:bold;"><label style="font-weight:bold;padding-right:5px;display:inline-block;">Grand Total</label>
        <span class="input-group-addon">$</span><input placeholder="$00.00" name="grand_total" id="grand_total" size="10" style="float:right;text-align:right;" readonly /></td>
    </tr>
</table>

更新： 我已解决了问题，如jsfiddle提供的那样。

Answer 1

在实际解析值为float之前，在代码中添加以下条件。

if(preTotal === ""){
    preTotal = 0; // assign number value you like
}

和

if(gTotal === ""){
    gTotal = 0; // here also.
}

因为这些值第一次是空字符串。

另外，我注意到这里正在处理“focusin”事件。每当用户将某些内容放入提供的测试框中时，它就会触发处理程序。