Calcul automatique dans tableau dynamique

Version imprimable

Bonjour,

je réalise un formulaire afin de traiter les bons de commandes.

J'ai un tableau dynamique qui ce présente comme ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table class="dTable" style="text-align:center; width:90%; margin-top:30px;">
    <thead>
            <th style="text-align:center; width:5%">Poste <br/>analytique</th>
            <th style="text-align:center; width:5%">Code <br/>chantier</th>
            <th style="text-align:center; width:40%">D&eacute;signation</th>
            <th style="text-align:center; width:5%">Unit&eacute;</th>
            <th style="text-align:center; width:5%">Quantit&eacute;</th>
            <th style="text-align:center; width:10%">Prix unitaire <br/>H.T.</th>
            <th style="text-align:center; width:10%">Montant H.T.</th>
            <th style="text-align:center; width:5%">Taux <br/>TVA</th>
</thead>
<tbody>    
        <tr>
            <td><input class="tableau" type="text" name="champ1[]" id="champ1[]" /></td>
            <td><input class="tableau" type="text" name="champ2[]" id="champ2[]" /></td>
            <td><input class="tableau" type="text" name="champ3[]" id="champ3[]" /></td>
            <td><input class="tableau" type="text" name="champ4[]" id="champ4[]" /></td>
            <td><input class="tableau" type="text" name="champ5[]" id="champ5[]" value="8"></td>
            <td><input class="tableau" type="text" name="champ6[]" id="champ6[]" value="" OnKeyUp="javascript:calcul(this.value, document.getElementById('champ5').value);"> </td> 
            <td><input class="tableau" type="text" name="champ7[]" id="champ7[]" value="" ></td>
            <td><input class="tableau" type="text" name="champ8[]" id="champ8[]"/></td>
            <td><a href="#" onclick="delLigne(this); return false;">Supp</a></td>
    </tbody>
<tfoot>        
<tr><th colspan="9"><a href="#" onclick="addLigne(this); return false;">Ajouter une ligne</a></th></tr>        
</tfoot>

J'utilise du javascript pour le calcul.

Code:

1
2
3
4
5
function calcul(chiffre1, chiffre2)
{
    result = chiffre1*chiffre2;
    document.getElementById('champ7').value = result;
}

Avec une seule ligne cela fonctionne.
Cependant je n'arrive pas à faire fonctionner le code javascript en dynamique pour qu'il effectue les calcul automatiquement avec les champ5[],champ6[],champ7[]. :?

Pouvez-vous m'aider à résoudre ce problème?
Merci d'avance.

Bonjour,
commençons par le début

Citation:

OnKeyUp="javascript:calcul(this.value, document.getElementById('champ5').value);"

il est inutile de mettre javascript: les événements attendant un script javascript.

Une ID doit être UNIQUE dans la page et comme tu as initialisé les ID de tes champs il y a lourd à parier qu'il y aura duplication, d'ailleurs dans la solution que je vais te présenter tu en aura pas besoin.

Dernier point qui est plus relatif au CSS, pourquoi mettre des styles inline alors que tu sais te servir des feuilles de style, à preuve tes class sur les INPUTs.

Venons en au fait

Citation:

Pouvez-vous m'aider à résoudre ce problème?

Dans la fonction de calcul il te suffit de remonter au parent de l'INPUT pour atteindre le parent TR...passons à ce que pourrait être la fonction
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function calcul(obj){ // recherche TD parente de l'input (obj) passé en paramètre var oTD = obj.parentNode; // recherche TR parente de la TD var oTR = oTD.parentNode; // récup de la position de la TD sur la ligne var ind = oTD.cellIndex; // récup. TD précédente var oTDavant = oTR.cells[ind-1]; // récup. TD suivante var oTDapres = oTR.cells[ind+1]; // récup de l'INPUT de la TD précédente var oInputAvant = oTDavant.firstChild; // récup. de l'INPUT de la TD suivante var oInputApres = oTDapres.firstChild; // OUF!!! enfin le calcul oInputApres.value = oInputAvant.value * obj.value; }
la fonction devra être appelée de la façon suivante dans ton code, les ID ont été supprimées

Code:

<td><input class = "tableau" type = "text" name = "champ6[]" value = "" onkeyup = "calcul(this);"> </td>

Merci beaucoup, :ccool:
J'aurais pu passer encore des jours sans trouver la solution.

Je vais continuer à peaufiner mon code, notamment les styles inline.
Pour ceux qui voudrait le code le voici :

dans le head:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Ajout/suppression ligne du tableau  -->
<script type="text/javascript" src="dtable.js"></script>
<!--  -->
 
 <script type="text/javascript">
function calcul(obj){
  // recherche TD parente de l'input (obj) passé en paramètre
  var oTD = obj.parentNode;
  // recherche TR parente de la TD
  var oTR = oTD.parentNode;
  // récup de la position de la TD sur la ligne
  var ind = oTD.cellIndex;
  // récup. TD précédente
  var oTDavant = oTR.cells[ind-1];
  // récup. TD suivante
  var oTDapres = oTR.cells[ind+1];
  // récup de l'INPUT de la TD précédente
  var oInputAvant = oTDavant.firstChild;
  // récup. de l'INPUT de la TD suivante
  var oInputApres = oTDapres.firstChild;
  // OUF!!! enfin le calcul
  oInputApres.value = oInputAvant.value * obj.value;
}
</script>

dans le body:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table class="dTable">
    <thead>
        <tr>
			<th>Poste <br/>analytique</th>
			<th>Code <br/>chantier</th>
			<th>D&eacute;signation</th>
			<th>Unit&eacute;</th>
			<th>Quantit&eacute;</th>
			<th>Prix unitaire <br/>H.T.</th>
			<th>Montant H.T.</th>
			<th>Taux <br/>TVA</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="mon_tableau">
 
        <tr>
            <td><input class = "tableau" type = "text" name = "champ1[]" /></td>
            <td><input class = "tableau" type = "text" name = "champ2[]" /></td>
            <td><input class = "tableau" type = "text" name = "champ3[]" /></td>
            <td><input class = "tableau" type = "text" name = "champ4[]" /></td>
	    <td><input class = "tableau" type = "text" name = "champ5[]"/></td>
	    <td><input class = "tableau" type = "text" name = "champ6[]" onkeyup = "calcul(this);"/> </td> 
            <td><input class = "tableau" type = "text" name = "champ7[]"/></td>
            <td><input class = "tableau" type = "text" name = "champ8[]" /></td>
            <td><a href="#" onclick="delLigne(this); return false;">Supp</a></td>
        </tr>
    </tbody>
		<tfoot>
	  <tr><th><a href="#" onclick="addLigne(this); return false;">Ajouter une ligne</a></th></tr>
		</tfoot>			
</table>

et le js pour ajouter et supprimer les lignes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
window.onload = dtableInit;
 
/* initialise le script */
function dtableInit() {
    var table = document.getElementsByTagName('TABLE');
    for ( var i = 0; i < table.length; i++ ) {
        // on récupère tous les tableaux dynamiques
        if ( table[i].className = 'dTable' ) {
            var tbody = table[i].tBodies[0];
            var newTr = tbody.rows[0].cloneNode(true);
 
            // on masque la première ligne du tbody (la ligne de reference)
            tbody.rows[0].style.display = 'none';
 
            // on en ajoute une
            tbody.appendChild(newTr);
        }
    }
}
 
/* trouve le tag "parentTagName" parent de "element" */
function getParent(element, parentTagName) {
    if ( ! element )
        return null;
    else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() )
        return element;
    else
        return getParent(element.parentNode, parentTagName);
}
 
/* ajoute une ligne */
function addLigne(link) {
    // 1. récuperer le node "TABLE" à manipuler
    var td = link.parentNode;
    var table = getParent(td,'TABLE');
 
    // 2. on va manipuler le TBODY
    var tbody = table.tBodies[0];
 
    // 3. on clone la ligne de reference
    var newTr = tbody.rows[0].cloneNode(true);
    tbody.appendChild(newTr);
 
    if ( document.all )  // pour IE
        newTr.style.display = "block";
    else
        newTr.style.display = "table-row"; // pour Gecko
}
 
/* supprimer une ligne */
function delLigne(link) {
    // 1. récuperer le node "TABLE" à manipuler
    var td = link.parentNode;
    var table = getParent(td, 'TABLE');
 
    // 2. récuperer le TBODY
    var tbody = table.tBodies[0];
 
    // 3. Supprimer le TR
    tbody.removeChild(getParent(td, 'TR'));
}