Discussion :

[tavarlindar]

Ce sujet est lié au sujet « compteur de ligne - mise à jour » mais concerne plus la partie DOM.
Je souhaite savoir comment on peut modifier les attributs d’un champ input (name, id, value) qui se trouve dans un tableau.
Exemple
La fonction ci-dessous remplace la valeur du champ input par le numéro de ligne.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function majNumLignes(){
		for(var i = 0 ; i < nbLignesNew ; i++){
		var tbl = document.getElementById('tabprincing');
		//Mise a jour de la cellule 1
		tbl.tBodies[0].rows[i].getElementsByTagName('TD')[1].innerHTML = (i+1);
 
		//Mise a jour de la cellule 2
		tbl.tBodies[0].rows[i].getElementsByTagName('TD')[2].innerHTML = (i+1);
	}
}

Comment peut-on le faire sans utiliser le innerHTML ?
Comment modifier le nom du champ (name) par …. Nomduchamp + i ?
et pour bien comprendre et si devait changer l'id du champ ...

Par avance un très grand merci à ceux qui m'éclaireront.

[marcha]

Salut,

Tu peux utiliser setAttribute pour modifier un attribut d'un élément.

[SpaceFrog]

la syntaxe avec id ...

Code :

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

document.getElementById('idElement').value="machin chouette";

avec la syntaxe form et name :

Code :

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

document.forms['nomduform'].elements['namedeElement'].value='coucou'

[tavarlindar]

Merci pour vos interventions, mais elles ne répondent pas vraiment à mes attentes.

J'ai essayé la solution de Marcha, (voir page de test)
j'ai du loupé une étape.

Concernant la proposition de SpaceFrog : étant donné que mes id ou nom changent, difficile de les identifier pour en modifier leur attributs.

[tavarlindar]

Peut-on faire autrement ?

page de test
Objectif : incrémenter automatiquement le nom d'un champ

en utilisant innerHTML :
tbl.tBodies[0].rows[i].getElementsByTagName('TD')[2].innerHTML = "<input type='text' name='montant_vente"+(i+1)+"' size='20' value='"+(i+1)+"'> ";

en n'utilisant pas le innerHTML :
tbl.tBodies[0].rows[i].getElementsByTagName('TD')[2].getElementsByTagName('INPUT')[0].setAttribute('name','montant_vente'+(i+1));
tbl.tBodies[0].rows[i].getElementsByTagName('TD')[2].getElementsByTagName('INPUT')[0].setAttribute('value',(i+1));

Y at-il plus simple et plus élégant ?

[SpaceFrog]

Je ne comprends pas à quel moment tu créées le champs input ??
je ne vois pas de difficulté particulière à nomme un chmaps, mais je ne comprends pas ton, cheminement ...

Pourquoi et comment et où ajoutes tu des champs ?

[marcha]

tbl.tBodies[0].rows[i].getElementsByTagName('TD')[2].getElementsByTagName('INPUT')[0].setAttribute('name','montant_vente'+(i+1));
tbl.tBodies[0].rows[i].getElementsByTagName('TD')[2].getElementsByTagName('INPUT')[0].setAttribute('value',(i+1));
Y at-il plus simple et plus élégant ?

Salut,

Tu es sur la bonne voie, a part que ton bouton delete supprime toujours la
dernière ligne et pas la ligne courante ?

Sinon tu peux écrire ça ainsi:

Code :

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

1
2
3
4
5
 
var row = tbl.tBodies[0].rows[i];
var champs = row.getElementsByTagName('TD')[2].getElementsByTagName('INPUT')[0];
champs.setAttribute('name','montant_vente'+(i+1));
champs.setAttribute('value',(i+1));