Table javascript comme manipulation de formulaire

Question

Fondamentalement, j'ai un formulaire dans une table. Chaque ligne de la table a des champs de saisie.

Par exemple:

 col1 col2 
row1 A  C 
row2 B  D 

Certains des champs d'entrée dépendent des autres. Lorsque je tape quelque chose dans A, B et C, D est verrouillé et sa valeur est automatiquement remplie par le calcul de A, B et C.

De plus, l'utilisateur peut entrer des valeurs dans les champs dans n'importe quel ordre, et celui qui reste est calculé.

Est-ce que quelqu'un sait si un plugin jQuery/prototype peut faire quelque chose comme ça?

Answer 1

Vous pouvez effectuer quelques opérations simples sans avoir besoin de jQuery. Tout d'abord, au champ D « verrouiller » (désactiver), vous pouvez ajouter disabled = "disabled" à la balise d'entrée HTML comme ceci:

<input type="text" id="D" disabled="disabled" /> 

Cela rendra la zone de texte lisible, mais non modifiable. Je suppose que c'était ce que vous essayiez d'accomplir. Deuxièmement, concernant le calcul automatique du contenu de A, B et C, vous pouvez ajouter des gestionnaires d'événements aux variables d'entrée de sorte qu'un événement se produise (par exemple, en appuyant sur une touche du clavier ou en déplaçant le focus sur un élément différent), vous pouvez exécuter une fonction.

Pour ce faire, tout d'abord déclarer une fonction Javascript dans votre document comme ceci:

<script language="javascript"> 

function calculate() { 
    document.getElementById('D').value = parseInt(document.getElementById('A')) + parseInt(document.getElementById('B')) + parseInt(document.getElementById('C')); 
} 

</script> 

(Cette fonction trop simpliste suppose toutes les entrées ont ids de 'A', 'B', 'C' Notez que cela suppose également que vous essayez seulement de calculer des entiers, et que cette fonction n'essaie même pas de faire une vérification de la santé de l'utilisateur pour s'assurer que les champs de texte ont les valeurs attendues. cette fonction n'a pas été testée.)

Une fois que vous avez la fonction, vous pouvez l'ajouter à chacun des champs de texte en utilisant les gestionnaires d'événements Javascript. Par exemple, si vous voulez que le calcul se produire lorsque l'utilisateur clique sur quelque chose en dehors de la zone d'entrée, ajoutez onblur="calculate()" à la balise d'entrée comme ceci:

<input type="text" id="A" onblur="javascript:calculate()" /> 

Vous pouvez choisir le gestionnaire d'événements approprié que vous voulez. For more on event handlers, click here.