从第一笔金额中扣除总金额

Question

在下面的代码中，我想计算进入余额字段的剩余余额。这里我使用动态添加文本字段，我想添加以前添加的文本字段值+当前值加法和减去total_amount。请帮帮我

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><input name="first_service[] '+rowCount+'" value="Payment '+rowCount+'" type="text" size="15" /> <input name="first_amount[]" id="first_amount" type="text" size="10"/> <input name="first_date[]" type="date" /> <select name="paid[]"> <option value="paid">Paid</option> <option value="unpaid">UnPaid</option></select><a href="javascript:void(0);" onclick="removeRow('+rowCount+');"><input type="button" value="-"></a></p>';
jQuery('#addedRows').append(recRow);
}

function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>
<script type="text/javascript">


			 function calc() {
				
var total_amount = document.getElementById('total_amount').value;
     var first_amount = document.getElementById('first_amount').value;

var balance=(total_amount-first_amount);

	document.getElementById('balance').value =balance;
}
		</script>

 <table  bgcolor="#FFFFFF" align="center" width="68%" height="100" border="0" cellpadding="2" cellspacing="5">
			  <br><br>
			    <tr>
                    <td align='right'>Company_Name</td> 
					<td>             
                    <input name="company_name" type="text"  value="<?php echo $company_name;?>" />
                </td>
                </tr>
				
                </tr>
				 <tr >
                   <td align="right">Service_Name </td>
				 <td>
                    <input type="text" name="service"  value="<?php echo $service;?>"/>
                  </td>
                </tr>
				<tr >
                   <td align="right">Payment_Type </td>
				 <td>
                    <input type="text" name="first_service" value="<?php echo $first_service;?>"/>
                  </td>
				    </tr>
                <tr >
                   <td align="right">Payment</td>
				 <td>
                    <input type="text" id="first_amount" name="first_amount" value="" autocomplete="off" onkeyup="calc();"/>
						</td>
					</td>                            	
					
                </tr>
                
				<tr >
                   <td align="right">Payment_Date </td>
				 <td>
                    <input type="date" name="first_date"  value="<?php echo $first_date;?>"/>
                  </td>
                </tr>
				<tr >
				<td align="right">Balance_Due </td>
				 <td>
                <input type="text" id="balance" name="balance"  value="" onkeyup="calc();"/>
				<td><select name="paid">
				<option value="paid">paid</option>
				<option value="unpaid">unpaid</option>
				</select>
				</td>
                                  
				 </td>
                </tr>
				
				<tr >
                   <td align="right">Total_Amount </td>
				 <td>
                    <input type="text" id="total_amount" name="total_amount"  value="<?php echo $total_amount;?>"/>
                  </td>
                </tr>
                 <tr>
                  <td><td class="link"><input type="submit" name="Update"  value="Update" /> <a href="payment_details.php?company_name=<?php echo $company_name;?>">Cancel</a> 
                  </td>
                </tr>
              </table>
			  </div>
          </form>

<td><input type="text" name="first_service[]" value="Payment 1" size="15" >
<input type="text" name="first_amount[]" id="first_amount" placeholder="Amount" size="10" onkeyup="calc()">
<input type="date" name="first_date[]" size="20"> <select name="paid[]" ><option value="paid">Paid</option><option value="unpaid">UnPaid</option></select> <input type="button" value="+" onclick="addMoreRows(this.form);">
<div id="addedRows"></div>

Answer 1

根据您的addMoreRows功能，您可以添加多个包含first_amount值的元素。您在名称中使用first_amount[]将所有first_amount值保留在数组中，但对于所有错误使用相同的ID。 ID必须在HTML中是唯一的。所以首先解决这些问题。

然后在脚本中首先获取first_amount元素的长度，然后添加它们的值。然后做你想做的事。