Jquery each()function内の誤作動の原因が解かりません

Question

Jqueryを使った表計算のフォームを作ろうとして下記のコードを作ってみたんですが一部不具合があって行き詰ってしまいました。

<form id="quotation" action="./" method="POST">

	<div>
		<button type="submit">見積登録</button>
	</div>
	<div id="result">
		<div>税抜き金額 	<input type="num" id="alltotal"		 val="" value="" disabled="disabled"/></div>
		<div>消費税 		<input type="num" id="tax"			 val="" value="" disabled="disabled"/></div>
		<div>合計金額 		<input type="num" id="taxincluded"	 val="" value="" disabled="disabled"/></div>
	</div>


	<table id="quotation">
		<tr>
		<th>No</th><th>数量</th><th>単価</th><th>小計</th>
		</tr>

		<tr class="quotation">
		<td>1</td>
		<td> <input type="number" 	name="suryou1" 	class="num" 		val="" value="50"	 /> </td>
		<td> <input type="number" 	name="tanka1" 	class="per" 		val="" value="40"	 /> </td>
		<td> <input type="number" 					class="subtotal" 	val="" value=""		 /> </td>
		</tr>

		<tr class="quotation">
		<td>2</td>
		<td> <input type="number" 	name="suryou2" 	class="num" 		val="" value=""	 /> </td>
		<td> <input type="number" 	name="tanka2" 	class="per" 		val="" value=""	 /> </td>
		<td> <input type="number" 					class="subtotal" 	val="" value=""		 /> </td>
		</tr>

		<tr class="quotation">
		<td>3</td>
		<td> <input type="number" 	name="suryou3" 	class="num" 		val="" value="50"	 /> </td>
		<td> <input type="number" 	name="tanka3" 	class="per" 		val="" value="40"	 /> </td>
		<td> <input type="number" 					class="subtotal" 	val="" value=""		 /> </td>
		</tr>

	</table>

</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">

jQuery(function($){
	$(window).ready(function(){ 
		var TOTAL;
		TOTAL=0;
		$(".quotation").each(function() {
			var num = $(this).find('.num').val();
			var per = $(this).find('.per').val();
			var subtotal = num*per;
			var SUBTOTAL = Math.round( subtotal );
			$(this).find('.subtotal').val(SUBTOTAL);
			/*
			if(!num || !per){
				$(this).find('.subtotal').val('');
				return false; 
			};
			*/
			TOTAL = parseInt(SUBTOTAL)+TOTAL;
		});  
		
		var TAX = Math.round( TOTAL*.08 );
		var TAXINC = TOTAL+TAX;

		$('#alltotal').val( TOTAL );
		$('#tax').val(TAX);
		$('#taxincluded').val(TAXINC);
	});

	$(document.forms["quotation"]).change(function(){
		var TOTAL;
		TOTAL=0;
		$(".quotation").each(function() {
			var num = $(this).find('.num').val();
			var per = $(this).find('.per').val();
			var subtotal = num*per;
			var SUBTOTAL = Math.round( subtotal );
			
			$(this).find('.subtotal').val(SUBTOTAL);
			
			/*
			if(!num || !per){
				$(this).find('.subtotal').val('');
				return false; 
			};
			*/
			TOTAL = parseInt(SUBTOTAL)+TOTAL;
		});  
		
		var TAX = Math.round( TOTAL*.08 );
		var TAXINC = TOTAL+TAX;

		$('#alltotal').val( TOTAL );
		$('#tax').val(TAX);
		$('#taxincluded').val(TAXINC);
	});

	
});
	
</script>

javascriptのコメントアウトした部分は 未記入の行の小計箇所に「0」が入ってしまうのを防ぐために後から追記した物ですが、
これが原因で 途中の行に小計の空欄があると それ以下の行が動作しなくなってしまいました。

この誤作動の原因が解かる方、 教えて下さい。
よろしくおねがいします。

Answer 1

下記のreturn false;を取ればOKじゃないかと。

if(!num || !per){
  $(this).find('.subtotal').val('');
  return false; 
};

Comments

[退会済みユーザー]

ありがとうございます！
解決できました。
本当にありがとうございます。m(_ _)m