récupérer le numéro de ligne d'un tableau html

Version imprimable

06/10/2008, 14h19
hartecel

récupérer le numéro de ligne d'un tableau html

Bonjour,

J'ai un tableau html qui contient des lignes de commande avec un article, la quantité, le prix et le montant. Ces lignes peuvent être supprimées.
L'utilisateur rentre le prix et la quantité et je voudrais que ça calcule automatiquement le montant.
J'ai créé une fonction calculmontant() que j'ai appelé sur le keyup de l'input de la quantité et du prix. Mon problème est que je n'arrive pas à récupérer le numéro de la ligne pour calculer le montant correspondant.

Qqn peut m'aider ?

Merci.
06/10/2008, 14h38
Auteur

bonjour,

tu peux nous montrer ton code ?

Sinon tu peux faire :

Code:

document.getElementsById("idTableau").rows

qui retourne les lignes du tableau.

Voici ma fonction javascript :

Code:

1
2
3
4
5
6
7
8
9
 
function calculMontant(i)
{
    var prix = document.getElementsByName('prixart[]')[i].value ;
    var qte  = document.getElementsByName('qteartlivre[]')[i].value ;
    var montant = prix * qte;
 
    document.getElementsByName('montant[]')[i].value = montant;
}

J'utilise cette fonction dans le code suivant :

Code:

1
2
3
4
 
$form.= "<td><input type='text' name='qteartlivre[]' size='4' value ='".$tabArtFact[qte]."'></td>";
$form.= "<td><input type='text' name='prixart[]' onkeyup='calculMontant(this);' size='4' value ='".$tabArtFact[prix]."'></td>";
$form.= "<td><input type='hidden' name='montant[]' size='4' value ='".$tabArtFact[montant]."'>".$tabArtFact[montant]."</td>";

En fait à la place de this, je veux mettre le numéro de ligne ...

Le numéro de ligne est une propriété de TR, tu peux difficilement y accéder par un TD.

Je te propose donc d'utiliser une variable globale : comme ça tu n'as pas à te soucier du numéro de ligne.
Chaque input d'une même ligne a le même index.

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
td{
  width: 100px;
}
 
-->
</style>
 
 
<script type="text/javascript">
<!--
var index = 0; // index de l'élément créé
 
function calculMontant(i)
{
    var prix = parseFloat(document.getElementById("prixart[]"+i).value);
    var qte  = parseInt(document.getElementById("qteartlivre[]"+i).value);
    var montant = prix * qte;
    
    document.getElementById("montant[]"+i).value = montant;
}
 
 
function ajoutLigne()
{
  var bouton, inputPxUnit, inputQte, inputMontant;
  var Cell;
  var tableau = document.getElementById('tableau');
  var ligne = tableau.insertRow(-1); // ajout d'une ligne
 
  
  // Prix unitaire
  Cell = ligne.insertCell(0);
  inputPxUnit = document.createElement("input");
  inputPxUnit.id = "prixart[]" + index; // id de l'élément
  inputPxUnit.value = "0";   // prix unitaire
  Cell.appendChild(inputPxUnit);
  
  // Quantité
  Cell = ligne.insertCell(1); 
  inputQte = document.createElement("input");
  inputQte.id = "qteartlivre[]" + index; // id de l'élément
  inputQte.value = "0"; // quantité
  
  //---- attention à la syntaxe utilisée pour que la fonction calculMontant() prenne bien en argument l'index des input
  inputQte.index = index;
  inputQte.onkeyup = function(){calculMontant(inputQte.index)}
  Cell.appendChild(inputQte);
  
  // Montant
  Cell = ligne.insertCell(2);
  inputMontant = document.createElement("input");
  inputMontant.id = "montant[]" + index; // id de l'élément
  inputMontant.value = "0";  // montant
  Cell.appendChild(inputMontant);
  
  // pour supprimer un article
  Cell = ligne.insertCell(3);
  bouton = document.createElement("input");
  bouton.type = "button";
  bouton.value = "Supprimer";
  bouton.onclick = function(){suppression(ligne)};
  Cell.appendChild(bouton);
  
  // index de l'élément suivant
  index++;
}
 
function suppression(ligne)
{
  document.getElementById('tableau').deleteRow(ligne.rowIndex);
}
 
 
//-->
</script>
 
</head>
 
<body>
 
<form> 
<input type="button" onclick="ajoutLigne()" value="Ajouter un article" /> 
<br/><br/>
 
 
<table border="1" id="tableau">
  <tr>
    <td>Prix unitaire
    </td>
    <td>Quantité
    </td>
    <td>Montant
    </td>
    <td>&nbsp;
    </td>
  </tr>
</td>
</form>
 
</body>
 
</html>

07/10/2008, 09h13
hartecel

Je te remercie pour ton aide.
Le problème c'est que je suis dans le php. En fait, pour t'expliquer, j'affiche le résultat d'une requête facture. Je laisse à l'utilisateur la possibilité de changer différentes infos dans chaque ligne, voire supprimer la ligne.
Je n'utilise le javascript que pour le calcul du montant et pour la suppression de la ligne.

J'avais pensé utilisé une variable php $numligne qui s'incrémenterait à chaque affichage de la line (while). Mais, si l'utilisateur supprime une ligne, c'est plus bon...

Je vois pas du tout comment faire ...

rowIndex ?

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
<script type="text/javascript">
function foo(){
    var Tableau=document.getElementsByTagName('table')[0];
    i=0;
    while (Tableau.getElementsByTagName('td')[i]){
    		Tableau.getElementsByTagName('td')[i].onclick=function(){alert("ligne "+ this.parentNode.rowIndex)};
    		i++;
    		}
}    		
 
</script>
 
<body onload="foo()">
<table border="1" width="100%">
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
  <tr>
    <td width="100%">&nbsp;</td>
  </tr>
</table>
</body>