Berechnen Feldeingabe nach Zeile hinzugefügt, wenn die Taste

Question

klicken Ich habe eine Tabelle, die automatisch 2 Berechnungen macht:

1. Berechnung der Anzahl der Tage nach der Auswahl gekommenen und gegangenen Datum von zwei Eingangsdatumsfeld mit Kalender, Ergebnis ist gespeichert ist Feld (nbjours)
2. Multiplikation von 3 Feldern (nbcheveaux * Tage * Preis), Ergebnis wird gespeichert ind Feld (gesamt) Es gibt eine Schaltfläche, die, wenn wir darauf klicken, eine neue Zeile hinzugefügt wird. Wie kann ich dieselben automatischen Berechnungen in den nach dem Klick hinzugefügten Nachrichtenzeilen reproduzieren?

1- hinzufügen Meine Reihen funktionieren

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- Funktion, die Anzahl der Tage berechnen

$(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- Funktion, die die Multiplikation arbeiten

$('.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 Tabelle

Wie kann ich die Funktionen integrieren, um die Anzahl der Tage und die Multiplikation in der hinzugefügten neuen Zeile zu berechnen, die nach dem Klick angezeigt wird?

Answer 1

Also war ich gelangweilt und Ihre Frage in Angriff genommen, indem Sie es umschreiben, weil Sie ziemlich viel überflüssigen Code hatten.

Ihr Hauptproblem (mit den Berechnungen für die hinzugefügten Zeilen) rührt von der Tatsache her, dass Sie auf Klassen angewiesen waren, Elemente eindeutig zu identifizieren, aber das wird es nicht schneiden. Jede neue Zeile und jedes Element in der Zeile muss eine eigene eindeutige ID haben.

Ich habe mir auch die Freiheit genommen, dafür zu sorgen, dass es immer nur einen Knopf "Zeile hinzufügen" geben wird, wie Sie sehen werden.

Dieses Arbeitsbeispiel enthält Kommentare, die helfen, zu verfolgen, was vor sich geht.

$(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>