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

**hartecel** · 06/10/2008, 14h19

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.

**Auteur** · 06/10/2008, 14h38

bonjour,

tu peux nous montrer ton code ?

Sinon tu peux faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsById("idTableau").rows

qui retourne les lignes du tableau.

**hartecel** · 06/10/2008, 15h03

Voici ma fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Auteur** · 06/10/2008, 19h23

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**hartecel** · 07/10/2008, 09h13

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

**SpaceFrog** · 07/10/2008, 09h25

rowIndex ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

JavaScript

Discussions similaires

Partager

Partager