Summe Summe der Spalte nach der Eingabe Berechnung in Zeilen Javascript

Zunächst möchte ich sagen, Danke an diejenigen, die dieses Feld-Web-Entwicklung gestartet. Es ist großartig, vor allem Codierung. Ich finde es cool. Nun, ich bin Bauingenieur von Beruf, aber Codierung als Hobby Freizeit. Jetzt kam ich in den Ernst und dachte daran, meine Produktivität sowohl in der Arbeit als auch in meinem Team zu verbessern.Summe Summe der Spalte nach der Eingabe Berechnung in Zeilen Javascript

Ich habe die Tabelle entwickelt. Ich habe die Antwort für die Berechnung der "Amount" in der 7. Spalte durch Multiplizieren der Eingaben der Spalte 5 & 6 was genial ist (Sorry, ich bin zu aufgeregt, wenn ich die Lösung finde).

Aber wo stecken geblieben ist die (hat mich frustriert! Trotz der vielen Versuche und finden andere Lösungen oder Methoden - das ist, was ich in der Nähe) - Summe Summe der 7. Spalte und 3. Reihe. Total sagt 'Nan', was merkwürdig ist. Ich bin mir sicher, ich habe etwas falsch gemacht. Ich kann die Summe der Zeilen in der Spalte Betrag nicht abrufen.

Vielen Dank für Ihre Geduld beim Lesen meiner Frage. Ihre Hilfe/Kommentar/Vorschläge würden sehr geschätzt werden. Verbesserungen sind willkommen.

Bitte besuchen Sie meine Fiddle-Site https://jsfiddle.net/sandz/bxj38zps/1/, die zu dem Code führt, den ich entwickelt hatte. oder schauen Sie unter

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<title>TABLE RETEST</title> 
</head> 
<body> 

    <div class="w3-container w3-padding-4x w3-indigo"> 
     <h2> 
      Table Testing 
     </h2> 
    </div> 

    <div class="w3-container w3-section w3-pale-green"> 
    <table class="w3-table-all" id="sum_table" width="300" border="1"> 
     <tr class="titlerow"> 
      <th>SN</th> 
      <th>DESCRIPTION</th> 
      <TH>UNIT</TH> 
      <TH>REQD QTY</TH> 
      <TH>AVAIL. QTY</TH> 
      <TH>RATE</TH> 
      <TH>AMOUNT</TH> 
      <TH>REMARKS IF ANY</TH> 
     </tr> 

     <tr> 
      <td>1</td> 
      <td>Steel</td> 
      <td>Ton</td> 
      <td>200</td> 
      <td><input id="a.qty" type="number" oninput="calculate()" /></td> 
      <td><input id="rate" type="number" oninput="calculate()" /></td> 
      <td class="rowDataSd"><input id="amt1" type="number" name="amount" /></td> 
      <td><input type="text" name=""></td> 
     </tr> 

     <tr> 
      <td>2</td> 
      <td>Cement</td> 
      <td>Bags</td> 
      <td>300</td> 
      <td><input id="qty2" type="number" oninput="calculate1()" /></td> 
      <td><input id="rate2" type="number" oninput="calculate1()" /></td> 
      <td class="rowDataSd"><input id="amt2" type="number" name="amount" /></td> 
      <td><input type="text" name=""></td> 
     </tr> 
     <tr class="totalColumn"> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td class="totalCol"><input type="button" onclick="Calculate()" value="calculate"> TOTAL:</td> 
      <td><input type="text" name=""></td> 
     </tr> 

    </table> 



    <script> 
     function calculate(){ 
      var x1 = document.getElementById('a.qty').value; 
      var x2 = document.getElementById('rate').value; 
      var x3 = document.getElementById('amt1').value; 
      var x4 = x1 * x2; 
      amt1.value = x4; 
     } 

     function calculate1() { 
      var y1 = document.getElementById('qty2').value; 
      var y2 = document.getElementById('rate2').value; 
      var y3 = document.getElementById('amt2').value; 
      var y4 = y1 * y2; 
      amt2.value = y4; 

     } 

          var totals = [0]; 

      $(document).ready(function() { 

      var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')"); 

      $dataRows.each(function() { 
      $(this).find('.rowDataSd').each(function(i) { 
      totals[i] += parseInt($(this).html()); 
       }); 
      }); 
      $("#sum_table td.totalCol").each(function(i) { 
      $(this).html("total:" + totals[i]); 
      }); 

      }); 

     </script> 
    </div> 

</body> 
</html>

Quelle

2016-06-24 Rookie_Coder

Das liegt daran, dass in

$(this).find('.rowDataSd').each(function(i) { 
    totals[i] += parseInt($(this).html()); 
});

$(this).html() kehrt das Eingabefeld in der Tabellenzelle und nicht den Wert im Eingabefeld ein. Ändern Sie dieses Bit, um über die Eingabefelder zu iterieren und ihren Wert zu erhalten.

// ".rowDataSd input" selects all inputs within elements that have class="rowDataSd" 
$(this).find('.rowDataSd input').each(function(i) { 
    // So "this" is now an input, so we can $(this).val() to get its value. 
    // And in case there is no value, parseInt will return NaN, so we default to 0 in this case 
    totals[i] += parseInt($(this).val()) || 0; 
});

Quelle

2016-06-24 07:04:23 moxn

wir danken Ihnen das Moxn. Ich verstehe. Könnten Sie das bitte näher erläutern? JSFiddle oder irgendetwas ähnliches Vielleicht, wenn es Ihnen nichts ausmacht? Das ist, weil ich brauche ein bisschen länger zu verstehen, bis ich Beispiele sehe. Sehr geschätzt. Vielen Dank. –

@Rookie_Coder, Ich habe einige Kommentare hinzugefügt, um Änderungen zu erklären. Viel Spaß – moxn

vielen Dank. Sehr geschätzt. Prost. –

Summe Summe der Spalte nach der Eingabe Berechnung in Zeilen Javascript

Antwort

Verwandte Themen