modifier l'attribut name d'un input

**Rogg26** · 15/06/2007, 00h45

Bonjour,
Voila j'aimerais modifier l'attribut name d'un input.
J'utilise la commande
document.getElementById('tarifs').rows[i].cells[j].childNodes[0].name = nveau_nom;

Ca marche pour l'id mais pas pour le name.

Enfait j'ai un tableau dans lequel on peut ajouter et supprimer des lignes, ces lignes contenant des input. A la suppression d'une ligne j'aimerais renommer tous les input nom1, nom2... avec des chiffres qui se suivent pour pouvoir les parcourir plus facilement au moment de l'enregistrement dans la base de données.

Si quelqu'un a une solution.

**Shinuza** · 15/06/2007, 04h18

A mon avis le childNodes que tu tapes n'est pas le bon.
Utilse firefox et pas ta ligne en paramètre de la methode log de l'objet console

Code :

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

console.log(malignequimerenvoieunelement)

**deY!** · 15/06/2007, 07h31

Tu connais le nombre exacte d'input ?

tu peux faire

Code :

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

1
2
3
4
5
6
var myform = document.forms['myform'];
var myinput;
for (n=0;n<nbinput;n++) {
     myinput = myform.elements['myinput'+n];
     myinput.setAttribute('name', 'myinput'+n-1);
}

Pour IE tu dois pouvoir faire

Code :

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

myinput.name = 'myinput'+(n-1);

**SpaceFrog** · 15/06/2007, 09h54

attention aux childNodes !!!
fais un simple alert du childNodes.length tu comprendras ton erreur ...

**Auteur** · 15/06/2007, 10h04

bonjour,

Tu peux t'inspirer du script que je donne dans cette discussion

Après quelques modifications :

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
116
117
118
119
120
121
122
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
 
function ajoutLigne()
{
  //num = 0;
  var Cell;
  var nom = document.getElementById("nom").value;
  var prenom = document.getElementById("prenom").value;
  var tableau = document.getElementById('tableau');
  var ligne = tableau.insertRow(-1);
  var bouton;
 
  if (nom.length==0)
     nom = "&nbsp;";
  if (prenom.length==0)
     prenom = "&nbsp;";
 
 
  //on place dans la cellule 0, le numero de ligne
  Cell = ligne.insertCell(0);
  Cell.innerHTML = ligne.rowIndex;
 
  Cell = ligne.insertCell(1);
  Cell.innerHTML = nom;
  Cell = ligne.insertCell(2);
  Cell.innerHTML = prenom;
 
  //on cree dans la cellule 3 un bouton
  Cell = ligne.insertCell(3);
  bouton = document.createElement("input");
  bouton.type = "button";
  bouton.value = "Supprimer";
  bouton.onclick = function(){suppression(this,ligne)};
  bouton.name = "name"+ligne.rowIndex;
  Cell.appendChild(bouton);
 
  //on affiche dans la cellule 4 le nom du bouton
  Cell = ligne.insertCell(4);
  Cell.innerHTML = bouton.name;
 
  document.getElementById("nom").value = "";
  document.getElementById("prenom").value = "";
 
}
 
function suppression(bouton,ligne)
{
  alert("Nom du bouton cliqué= "+bouton.name);
 
  document.getElementById('tableau').deleteRow(ligne.rowIndex);
 
  //Recomptage des lignes...
  var tableau = document.getElementById('tableau');
  var trs = tableau.rows;
  var n = trs.length;
  var i, j,  nI, listeInput;
 
  for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
  {
    trs[i].cells[0].innerHTML = trs[i].rowIndex;
 
    //suppression du contenu de la cellule 4 (qui affiche le nom du bouton)
    trs[i].cells[4].innerHTML = "&nbsp;";
 
    //on liste les input de la cellule 3 (logiquement il y a uniquement le bouton défini dans ajoutLigne()
    listeInput = trs[i].cells[3].getElementsByTagName("input");
    nI = listeInput.length;
 
    for (j=0; j<nI; j++)
    {
       if (listeInput[j].type.toLowerCase()=="button") //si on a un bouton
       {
         listeInput[j].name = "name"+trs[i].rowIndex;
         trs[i].cells[4].innerHTML +=listeInput[j].name+" ";
       }
    }
  }
 
}
 
 
//-->
</script>
 
</head>
<body>
 
  <form id="formulaire" action="">
  <div>
  <label>Nom</label> <input type="text" id="nom" /><br />
  <label>Prenom</label><input type="text" id="prenom" /><br />
  </div>
 
      <table id="tableau" border="1">
        <tr>
        <td>Numéro de ligne</td>
        <td>Nom</td>
        <td>Prenom</td>
        <td>Supprimer la ligne</td>
        <td>Nom du bouton</td>
        </tr>
      </table>
  </form>
 
  <div>
  <input type="button" value="Ajouter une ligne" onclick="ajoutLigne()" />
  <br />
  </div>
 
</body>
 
 
</html>

pour modifier le nom, je recherche les boutons ligne par ligne en utilisant getElementsByTagName (fonction suppression()):

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
    //on liste les input de la cellule 3 (logiquement il y a uniquement le bouton défini dans ajoutLigne()
    listeInput = trs[i].cells[3].getElementsByTagName("input");
    nI = listeInput.length;
 
    for (j=0; j<nI; j++)
    {
       if (listeInput[j].type.toLowerCase()=="button") //si on a un bouton
       {
         listeInput[j].name = "name"+trs[i].rowIndex;
         trs[i].cells[4].innerHTML +=listeInput[j].name+" ";
       }
    }

**Rogg26** · 15/06/2007, 12h11

Envoyé par Shinuza

A mon avis le childNodes que tu tapes n'est pas le bon.
Utilse firefox et pas ta ligne en paramètre de la methode log de l'objet console

Code :

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

console.log(malignequimerenvoieunelement)

J'ai pas compris, qu'est ce que la methode log de l'objet console?

Enfait quel est le probleme avec les childNodes? Parce que la meme commande avec l'id fonctionne.

Je viens de tester sous firefox, cela fonctionne et le name est bien modifié.
IE ne comprendrait pas object.name?
Peut etre y a t-il une commande qui fonctionnerait sous IE.

**SpaceFrog** · 15/06/2007, 12h54

non IE et FFX n'interprètent pas les nodes de la même façon...

fais un alert du nodeName tu verras bien
et accessoirement fais une recherche avec nodecleaner dans la FAQ ou les contributions ...

**Rogg26** · 15/06/2007, 14h10

Je pense pas que mon probleme puisse-t-être résolu en utilisant un nodecleaner.
L'objet dont j'essaie de modifier le name est le bon.
Quand je fais un alert

alert(document.getElementById('tarifs').rows[i].cells[j].childNodes[0].name);

il m'affiche bel et bien le nom de l'objet que ce soir sur IE ou FFX.

Mais impossible de le modifier sous IE.