計算輸入字段後添加一行時點擊鏈接

Question

我有一個表，自動2個計算使得：到達和離開日期的選擇，從兩個輸入日期字段與日曆，結果之後的天數

1. 計算（nbjours）
2. 3個字段的乘法（nbcheveaux * days * price），結果存儲在ind字段中（總計） 有一個按鈕，當我們點擊它時會添加一個新行。如何在單擊後添加的新聞行上重現相同的自動計算？

1-我的添加行起作用

window. addRow = function addRow(btn) {   
var parentRow = btn.parentNode.parentNode; 
var table = parentRow.parentNode; 
var tr = document.createElement("tr"); 
var tdNbC = document.createElement("td"); 
var tdDateArrive = document.createElement("td"); 
var tdDateDepart = document.createElement("td"); 
var tdNbJour = document.createElement("td"); 
var tdPrix = document.createElement("td"); 
var tdTotal = document.createElement("td"); 
var td3 = document.createElement("td"); 
var inputDateArrive = document.createElement("input"); 
var inputDateDepart = document.createElement("input"); 
inputDateArrive.type = "text"; 
inputDateDepart.type = "text"; 
inputDateArrive.setAttribute("class", "date"); 
inputDateDepart.setAttribute("class", "date1"); 
var inputNbrC = document.createElement("input"); 
var inputNbrJour = document.createElement("input"); 
var inputPrix = document.createElement("input"); 
var inputTotal = document.createElement("input"); 
var inputButton = document.createElement("button"); 
inputButton.type = "button"; 
inputButton.innerHTML = "+"; 
inputButton.onclick = function(){ 
    addRow(this); 
}; 
tdNbC.appendChild(inputNbrC); 
tdDateArrive.appendChild(inputDateArrive); 
tdDateDepart.appendChild(inputDateDepart); 
tdNbJour.appendChild(inputNbrJour); 
tdPrix.appendChild(inputPrix); 
tdTotal.appendChild(inputTotal); 
td3.appendChild(inputButton); 
tr.appendChild(tdNbC); 
tr.appendChild(tdDateArrive); 
tr.appendChild(tdDateDepart); 
tr.appendChild(tdNbJour); 
tr.appendChild(tdPrix); 
tr.appendChild(tdTotal); 
tr.appendChild(td3); 
table.appendChild(tr); 
$(inputDateDepart).mask("99/99/9999"); 
$(inputDateArrive).mask("99/99/9999"); 
} 

2-函數計算天數

$(document).ready(function() { 
$('.date1').change(function() { 
var start = $('.date').datepicker('getDate'); 
var end = $('.date1').datepicker('getDate'); 
if (start<end) { 
var days = (end - start)/1000/60/60/24; 
$('.days').val(days); 
} 
else { 
alert ("Depated date must be greater that arrived date!"); 
$('.date').val(""); 
$('.date1').val(""); 
$('.days').val(""); 
} 
}); //end change function 
}); //end ready 

3-功能，其操作乘法

$('.nbrcevaux,.days,.price').keyup(function() { 
var nbrcevaux = parseInt($('.nbrcevaux').val()); 
var days = parseInt($('.days').val()); 
var prix = parseInt($('.price').val()); 
$('.total').val(nbrcevaux * days * prix); 
}); 

4- HTML表

 <table> 
     <tr> 
     <td class="centrer">Nbr de chevaux</td> 
     <td class="centrer">Arrived Date</td> 
     <td class="center">Departed Date</td> 
     <td class="centrer">Nb/Days</td> 
     <td class="centrer">Prix/jr/ cheval/boxe</td> 
    <td class="centrer"> Total</td> 

</tr> 
    <tr> 
    <td><input type="text" name="nbrcevaux" class="nbrcevaux" /></td> 
     <td><input type="text" name="datearrive" class ="date"/> </td> 
     <td><input type="text" name="datedepart" class ="date1" /></td> 
     <td><input type="text" name="nbrjours" class ="days" /></td> 
     <td><input type="text" name="prix" class="price" /></td> 
     <td><input type="text" name="total" class="total" /></td> 
      <td><button type="button" onClick ="addRow(this)">+</button> </td> 
    </tr> 

如何整合函數計算天數和乘法後點擊後添加新行顯示的行數？

Answer 1

所以，我很無聊，解決了你的問題，重寫它，因爲你有相當多的多餘的代碼。

您的主要問題（附加行的計算）源於您依賴類來唯一標識元素，但不會削減它。行中的每個新行和元素都需要具有其自己的唯一標識。如你所見，我還冒昧地確保只有一個「添加行」按鈕。

此工作示例內嵌了註釋以幫助您瞭解正在發生的事情。

$(function() { 
 

 
    // Declare & initialize module wide variables to store DOM elements: 
 
    var $txtnbrcevaux = $("#nbrcevaux"), $txtDateArrive = $("#dateArrive"), 
 
     $txtDepart = $("#datedepart"), $txtnbrjours = $("#nbrjours"), $txtPrix = $("#prix"), 
 
     $txtTotal = $("#total"), $btnAdd = $("#btnAddRow"), $masterRow = $("#master1"); 
 
    
 
    // Unique value that will identify new elements 
 
    var count = 1; 
 
    
 
    // Establish the date picker fields 
 
    $txtDateArrive.datepicker(); 
 
    $txtDepart.datepicker(); 
 
    
 
    // Wire up the button's click event: 
 
    $btnAdd.on("click", function(){ 
 
     
 
    // Make a copy of the last row 
 
    var newTR = $("tr[id=master" + count + "]").clone(true); 
 
    
 
    // Update the new row's id to be unique 
 
    newTR[0].id = "master" + (count + 1); 
 
    
 
    // Loop through the child elements and modify their id's so that they are unique 
 
    newTR.children().each(function(index){ 
 
     if(this.children.length > 0){ 
 
     // Wipe out old (copied values) 
 
     this.firstChild.value = ""; 
 
     var oldID = this.firstChild.id; 
 
     this.firstChild.id = oldID.substring(0, oldID.length) + (count + 1); 
 

 
     // Cloning datepickers creates problems because the clones remain bound to the 
 
     // original input element. Here, we'll create a new input element and then 
 
     // insert it where the current one is, then we'll remove the current one: 
 
     if($(this.firstChild).is(".date, .date1")){ 
 
      var newPicker = document.createElement("input"); 
 
      newPicker.id = this.firstChild.id; 
 
      newPicker.name = this.firstChild.name; 
 
      newPicker.setAttribute("class", this.firstChild.className.replace(" hasDatepicker", "")); 
 
      newPicker.style.width = "80px"; 
 
      
 
      // Set up the new datepicker: 
 
      $(newPicker).insertAfter(this.firstChild); 
 
      $(this.firstChild).remove(); 
 
      $(newPicker).datepicker(); 
 
     } 
 
     } 
 
     
 

 
    }); 
 
    
 
    // Increment the count so the next row will use the next number for its id's 
 
    count++; 
 
    
 
    // Hide the last row's button 
 
    this.style.display = "none";  
 
    
 
    // Add the new row to the table 
 
    $("table").append(newTR); 
 
    
 
    // Commented due to not having plugin available 
 
    // $(inputDateDepart).mask("99/99/9999"); 
 
    // $(inputDateArrive).mask("99/99/9999"); 
 
    }); 
 

 
    $('.nbrcevaux, .days, .price').on("keyup", function() { 
 
    var nbrCevaux = this.parentElement.parentElement.querySelector(".nbrcevaux").value; 
 
    var days = this.parentElement.parentElement.querySelector(".days").value; 
 
    var prix = this.parentElement.parentElement.querySelector(".price").value; 
 
    
 
    // Your problem was that you were trying to work with values from 
 
    // classes and not specific elements. Changing the function to expect 
 
    // the data to be passed to it and having it return the answer allow 
 
    // you to control what goes in and where to put what comes out 
 
    this.parentElement.parentElement.querySelector(".total").value = nbrCevaux * days * prix; 
 
    }); 
 
    
 
    $txtDepart.change(function() { 
 
    var start = $txtDateArrive.datepicker('getDate'); 
 
    var end = $txtDepart.datepicker('getDate'); 
 
    
 
    
 
    if (start < end) { 
 
     var days = (end - start)/1000/60/60/24; 
 
     $txtnbrjours.val(days); 
 
     
 
    } else { 
 
     alert ("Depated date must be greater that arrived date!"); 
 
     $txtDateArrive.val(""); 
 
     $txtDepart.val(""); 
 
     $txtnbrjours.val(""); 
 
    } 
 
    }); //end change function 
 
    
 
}); //end ready

/* This is only added to shrink things down so they appear within the space allotted */ 
 
input[type=text] {width:80px;} 
 
body {font-size:.5em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 
<table>  
 
    <tr> 
 
    <td class="centrer">Nbr de chevaux</td> 
 
    <td class="centrer">Arrived Date</td> 
 
    <td class="center">Departed Date</td> 
 
    <td class="centrer">Nb/Days</td> 
 
    <td class="centrer">Prix/jr/ cheval/boxe</td> 
 
    <td class="centrer"> Total</td> 
 
    </tr> 
 
    <tr id="master1"> 
 
    <td><input type="text" id="nbrcevaux" name="nbrcevaux" class="nbrcevaux"></td> 
 
    <td><input type="text" id="dateArrive" name="dateArrive" class ="date"></td> 
 
    <td><input type="text" id="datedepart" name="dateDepart" class ="date1"></td> 
 
    <td><input type="text" id="nbrjours" name="nbrjours" class ="days"></td> 
 
    <td><input type="text" id="prix" name="prix" class="price"></td> 
 
    <td><input type="text" id="total" name="total" class="total"></td> 
 
    <td><button type="button" id="btnAddRow">+</button> </td> 
 
    </tr> 
 
</table>