Discussion :

[amy0o0]

Bonjour,

J'avais posté un messafge hier, et je l'avais résolu d'une certaine manière, mais je souhaiterai faire qqch de mieux (si c'est possible).
J'ai longuement hésiter entre poster ce message ici ou dans le forum Javascript, so sorry si je me suis trompée

Bref:
dans ma page web, j'affiche un tableau. Dans une des case de ce tableau il y a une liste déroulante. Dans cette liste déroulante, je voudrai connaître la valeur sélectionnée par l'utilisateur et selon la valeur, je voudrai insérer ou non une ligne dans mon tableau, avec un champ texte à remplir par l'utilisateur. En réalité, il y a 3 valeurs pour lesquelles ce champs doit s'afficher.
ça marche en mettant après le <SELECT un onchange='submit()', mais après avoir longuement réfléchi, je préfèrerais vraiment faire cet ajout ou non de ligne dynamiquement, d'autant plus que cet affichage doit s'effectuer uniquement pour 3 valeurs de la liste parmi un 50aine... du coup je trouve ça vraiment dommage de faire recharger la page.
Si j'ai bien suivi, il faudrait créer une fonction Javascript, mais vraiment, après avoir fait beaucoup de recherches, je ne vois pas comment faire!

Merci d'avance pour l'aide...

[Sancho_54]

En gros ta fonction donnerai ca :

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
 
function ajouteTR(){
  var TR = document.createElement("tr");
  var TD1 = document.createElement("td");
  var TD2 = document.createElement("td"); // tu crée autant de TD qu'il te faut    
 
  // Création de ton champ texte 
  var Input = document.createElement("input");
  nInput1.setAttribute('name',"name_input");
  nInput1.setAttribute('id',"id_input");
 
  // Ajout du input dans le TD correspondant
  TD1.appendChild(Input);
 
  //Ajout des td dans le tr
  TR.appendChild(TD1);
  TR.appendChild(TD2);	
 
  //Récupération de l'element dans lequel tu va ajouter ton tr c'est a dire le       table
  var table = document.getElementById("table");
  // Récupération du dernier tr du table : item() prend en paramètre l'indice du dernier TR donc a toi de sauver l'indice du dernier tr dans une variable JAvascript
  var dernier_TR = table .getElementsByTagName("tr").item(2);
  // Et enfin ajout du tr
  table .insertBefore(TR,dernier);
}

Voila en gros ce que ca donne tiens moi au courant

[amy0o0]

Salut

Vraiment merci pour ton code.
Je pense que la dernière ligne doit être comprise comme :

table .insertBefore(TR,dernier_TR);

au lieu de
table .insertBefore(TR,dernier);

Non?

Je vais être honnête... je n'ai pas testé ta fonction, car au final, j'ai fait autre chose qui me convenait. Mais je garde ce code en tête, car je le comprends très bien (merci pour les commentaires! ) et j'en aurai peut être besoin par la suite...

Merci encore!

[Oluha]

J'ai déplacé ton post car il s'agit uniquement de javascript.
Si tu as résolu ton problème, ca serait sympa de mettre ton morceau de code pour les autres et d'appuyer sur le bouton "résolu" en bas.

Merci

[E.Bzz]

Je vais être honnête... je n'ai pas testé ta fonction, car au final, j'ai fait autre chose qui me convenait.

Si c'est avec innerHTML, revient à la méthode de Sancho

A+

[amy0o0]

En fait, j'ai fait une fonction Javascript qui cache ou non la cellule que je souhaitais selon la valeur de la liste déroulante sélectionnée.

Bref, ça donne un truc du genre:

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
 
function recup(){
var texte = document.getElementById("Id_liste_deroulante").value;  
    //Affiche / cache un element
    //alert(texte);// DEBUG
    var obj = document.getElementById("libelle_a_afficher_ou_non");
    if( texte == '1' || texte=='75' || texte=='73'){
        //alert("ici");// DEBUG
        obj.style.display =''; 
    }else{
        obj.style.display ='none';//masque
    }
 
    var obj2 = document.getElementById("champ_texte_a_afficher");
    if( texte == '1' || texte=='75' || texte=='73'){
        //alert("ici2");// DEBUG
        obj2.style.display =''; 
    }else{
        obj2.style.display ='none';
    }
}

sachant que j'ai rajouté 2 balises DIV côté HTML avec les id indiqué dans le code.

J'espère que c'est assez clair... pour ceux qui serait suceptible de s'y intéresser...

Encore merci...

[E.Bzz]

Juste un truc :

Code :

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

obj2.style.display ='block';

au lieu de

Code :

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

obj2.style.display ='';

[Sancho_54]

Pour ce qui est de la derniere ligne , oui c'est bien dernier_TR au lieu de dernier, c'était la fin donc je fatigué

Sinon ta méthode pourquoi pas

Allez a bientot et n''hésite si ta des soucis avec ce que je t'ai passé