Wie mehrere Eingänge gleichzeitig multipliziert mit Wert multipliziert werden

Question

So habe ich This Fiddle, wo ich eine Tabelle haben, die einen Eingang und Kosten hat. Es hat auch ein bisschen jQuery.

$(".total").change(function() { 
    i = 1; 
var input001 = document.getElementsByName(i)[0]; 
var cost001 = document.getElementById("cost" + i); 
var total001 = input001.value * cost001.innerHTML; 
var num = total001; 
var total = num.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "1,"); 
    document.getElementById("printchatbox").value = total; 
    i++; 
}); 

Dieser Code multipliziert die ersten Eingabe mal die erste Artikelkosten. Ich würde gerne einen Weg finden, diese 45 Mal zu wiederholen (einen für jeden Gegenstand), ohne diesen Code 45 Mal zu kopieren und einzufügen ... Wenn das der einzige Weg ist, es zu tun, kann ich das tun ... aber ich bin es in der Hoffnung, etwas zu lernen und meinen Code gleichzeitig deutlich kürzer zu machen. Diese Tabelle wird von PHP generiert, ich habe einfach den HTML-Code kopiert und eingefügt, der für die Geige generiert wurde.

while($row = $result->fetch_assoc()) { 
     $row['ItemID'] = ltrim($row['ItemID'], '0'); 
     ?> 
      <tr> 
       <td><input type="number" class="total" name="<?php echo $row['ItemID']?>" value "<?= isset($_POST[$row['ItemID']]) ? htmlspecialchars($_POST[$row['ItemID']]) : "" ?>"></td> 
       <td><?php echo $row['ItemID']?></td> 
       <td><?php echo $row['ItemDescription']?></td> 
       <td id="<?php echo 'cost' . $row['ItemID'] ?>"><?php echo $row['ItemCost']?></td> 
       <td id="<?php echo 'value' . $row['ItemID'] ?>"><?php echo $row['ItemValue']?></td> 
      </tr> 
      <?php 
      } 
      ?> 
      </table> 

dies ist der PHP-Code auf der Webseite, die die Tabelle erstellt ... ist dies die erste Zeile der HTML-Tabelle.

<tbody><tr> 
       <td><input class="total" name="1" value="" ""="" type="number"></td> 
       <td>1</td> 
       <td>Barrel Wrap 47"x31"</td> 
       <td id="cost1">39.38</td> 
       <td id="value1">47.25</td> 
      </tr> 

und hier ist ein Bild der ersten 10 Zeilen der Tabelle.

wenn ich dort etwas ändern, das ist völlig in Ordnung, hoffe ich nur die Lesbarkeit zu halten und die Redundanz zu verringern.
Dank

Answer 1

Hier ist die aktualisierte Geige: https://jsfiddle.net/737v3qxr/2/

Also habe ich ein paar Dinge geändert:

$(".total").change(function() { 
    var name = this.name; 
    var quantity = this.value; 
    var cost = document.getElementById("cost" + name).innerHTML; 
    var total = quantity * cost; 
    items[name] = {cost, quantity} 
    new_total(); 
}); 

wenn Sie eine Funktion/Zuhörer etwas anwenden, die this Referenzen das Element selbst , also musstest du kein extra i und ich ++ damit machen.

Ich habe auch JSON (es ist im Grunde ein Wörterbuch in einer anderen Sprache), die mit Tracking-Preise hilft eingeführt.

Der Großteil des Codes ist nur umbenannt, da Ihre Logik nicht wirklich zu weit weg war, nur sehr ungeschickt und verschachtelt.

Ich habe auch eine new_total Funktion hinzugefügt, die nicht wirklich eine Funktion an und für sich sein muss, aber es ist nur meine Vorliebe.

Endlich habe ich eine ID zu Ihrer Gesamtmenge hinzugefügt, um es einfacher zu verfolgen.

<input id="total" type="text" readonly id="printchatbox" name="total">

Es gibt auch einige seltsame leeren Text, den ich bin bezieht sich auf Ihre PHP unter der Annahme, aber Sie werden mit diesem selbst zu tun haben.

<input class="total" name="45" value="" ""="" type="number">

Answer 2

Sie können das Event-Handler-Argument auch:

$(".total").change(function(e) { 
    var cost001 = document.getElementById("cost" + e.target.name); 
    var total001 = e.target.valueAsNumber * Number(cost001.innerHTML); 
    var prev = Number(document.getElementById("printchatbox").value); 
    document.getElementById("printchatbox").value = total001 + prev; 
});