Der Wert der Eingangssumme von anderen Eingaben automatisch?

Question

Ich frage mich nur, wenn dies möglich ist, und wenn nicht, der beste Weg, Event-Handler einzurichten, damit dies geschieht ...

Wenn ich eine tabellenähnliche HTML-Tabelle wie folgt:

<table>
   <tr id="row1">
      <td><input type="text" class="number" value="1"/></td>
      <td><input type="text" class="number" value="2"/></td>
      <td><input type="text" class="total" /></td>
   </tr>
</table>

kann ich eine Funktion entlang der Linien schreiben:

function getTotal() {
   var total = 0;
   $("#row1 .number").each(function() {
       total += Number($(this).val());
   };
   return total;
}

$("#row1 .total").val(getTotal);

so daß der Wert des Eingangs total automatisch auf die Summe der number Eingänge in dieser Zeile (ohne onchange Ereignisbehandlungsroutinen für jeden number Eingangs eingestellt)?

Idealerweise möchte ich den Wert der gesamten ändern, nur weil es eingestellt ist die Summe der anderen Eingänge zu sein, so dass sie sich auf die Summe sowohl mit dem Laden der Seite und für alle Änderungen an den Eingängen eingestellt wird, dass ihr Wert abgeleitet aus.

Ich versuche, eine Seite zu machen, wo der Benutzer Wert in den nicht-Gesamtzellen eintritt, und eine Funktion, die Eingabe bestätigen und im Idealfall würde ich ein ein Benutzer macht jede Zeile jedes Mal zu aktualisieren, vermeiden mag, die ändern, aber zur gleichen Zeit will ich nicht die Dinge machen, übermäßig kompliziert durch zu schreiben, mit, dass die Gesamtzelle sollte nur aktualisiert, wenn eine Zelle in der Zeile ändert.

Answer 1

Sie können dies tun, ohne onchange zu verwenden und es überall aufrufen:

function setTotal() {
   var total = 0;
   $("#row1 .number").each(function() {
       total += parseInt($(this).val());
   };
  $("#row1 .total").val(total);
}

Wenn Sie automatisch auslösen wollte, fügen Sie einfach den onchange und Pageload wie folgt aus:

$(function( {
  $("#row1 .number").change(setTotal); //When changing
  setTotal(); //On page load
});

Answer 2

So etwas wie folgt aus:

$('#row1 input.number').change(function(){
    var total = 0;
    $('.number').each(function(){
        total += +$(this).val();
    }
    $('.total').val(total);
});

Sie müssen ein Ereignis haben, die eine Neuberechnung verursacht. Hier habe ich es das Änderungsereignis für alle input.number Elementen, die Sie sagen, Sie wollen nicht. Man könnte es eine Schaltfläche Ereignis machen, oder irgendetwas wie Sie, aber es gibt keine Möglichkeit für .total, ohne dass etwas machen „nur ändern“ geschehen.

Answer 3

Wenn Sie .val(getTotal) Sie val zu einem Funktionsobjekt Einstellung (das wird nicht funktionieren). Wenn Sie .val(getTotal()) haben würden Sie nur die Gesamt in diesem Moment bekommen.

Warum sagen Sie nicht so etwas wie:

$("#row1 .number).change(function () {
    $("#row1 .total").val(getTotal());
});