Faire automatiquement la valeur de la somme des entrées des autres entrées?

Question

Je me demande si cela est possible, et sinon, la meilleure façon de mettre en place des gestionnaires d'événements pour y arriver ...

Si j'ai une table HTML semblable à une feuille de calcul comme ceci:

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

puis-je écrire une fonction le long des lignes de:

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

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

sorte que la valeur de l'entrée total passe automatiquement à la somme des entrées number dans cette rangée (sans avoir à mettre onchange gestionnaires d'événements pour chaque entrée number)?

Idéalement, je veux que la valeur du total change simplement parce qu'elle est définie comme étant la somme des autres entrées, de sorte qu'elle se définira à la somme des charges de page et des changements apportés aux entrées. la valeur est dérivée de. J'essaye de faire une page où l'utilisateur entre des valeurs dans les cellules non-totales, et une fonction validera l'entrée, et idéalement je voudrais éviter d'avoir à mettre à jour chaque rangée chaque fois qu'un utilisateur fait un changement, mais en même temps je ne veux pas rendre les choses trop compliquées en ayant à écrire que la cellule totale ne devrait se mettre à jour que lorsqu'une cellule de sa rangée change.

Answer 1

Vous pouvez le faire sans utiliser onchange et appeler partout:

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

Si vous voulez déclencher automatiquement, il suffit d'ajouter le onchange et pageload comme ceci:

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

Answer 2

Lorsque vous faites .val(getTotal), vous définissez val sur un objet fonction (qui ne fonctionnera pas). Si vous avez fait .val(getTotal()) vous obtiendrez seulement le total à ce moment.

Pourquoi ne pas dire quelque chose comme:

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

Answer 3

Quelque chose comme ceci:

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

Vous devez avoir un événement qui cause recalcul. Ici, j'en ai fait l'événement de changement pour tous les éléments input.number, dont vous dites que vous ne voulez pas. Vous pourriez en faire un événement de bouton, ou tout ce que vous voulez, mais il n'y a aucun moyen pour que .total "change juste" sans que cela ne se produise.