[Résolu] Manipulation de tableau sur sélection depuis un select

Bonjour à tous !

Je développe une application J2ee. Je bloque sur un petit point pour un formulaire : un utilisateur doit sélectionner un mode de paiement, et suivant ce dernier, un tableau de n lignes se créera (sous forme de formulaire).

J'ai un objet Java mis en session qui possède l'attribut "nbr" et selon cette valeur, le tableau aura n lignes.

Je joins des images pour vous illustrer ce que je "souhaite".
cas avec nbr = 1
cas avec nbr = 2

J'ai donc 2 questions :

Comment je vais transmettre à ma fonction javascript ma valeur "nbr", je ne sais pas si avec un simple ${ mapModes.value.nbr } je pourrais transmettre la valeur. Je rappelle que cette valeur diffère suivant le select qu'on fait.

Comment je vais avoir n lignes sur mon tableau du dessus ? Concrètement, la fonction doit ajouter n tr et avoir à chaque fois les même td, je ne sais pas si c'est assez clair^^Je sais qu'il existe les fonctions insertRow et insertCell mais je ne vois pas comment les utiliser...

Au niveau du code de mon formulaire, j'ai quelque chose qui ressemble à ça :

<select name="listeModes" id="listeModes" nombre= ${ mapModes.value.nbr } onchange=creationTableau();>
  <c:forEach items="${ sessionScope.modesPaiement }" var="mapModes">
	   <option value="${ mapModes.key }">${ mapModes.value.type }</option>
	</c:forEach>
</select>

<table id="modalite_table">
  <tr>
     <th>Sélection du compte bancaire</th>
     <th>Reference de paiement</th>
 </tr>
	
  <tr>
  
	  <td><c:if test="${ !empty sessionScope.comptesBancaire }">
		<select name="listeComptes" id="listeComptes">
		  <c:forEach items="${ sessionScope.comptesBancaire }" var="mapComptes">
			  <option value="${ mapComptes.key }">${ mapComptes.value.numero }</option>
			</c:forEach>
		</select>
		</c:if></td>
    
		<td><input type="text" id="referencePaiement" name="referencePaiement" size="30"        maxlength="30" /></td>
  </tr> 
</table>

Merci d'avance pour votre collaboration.




Edit : J'ai commencé ma fonction js, j'ai trouvé la méthode createElement, je suis sur la bonne voix meme si le select dans le tableau sera difficile à faire (sachant que je le parcours avec la JSTL). J'attends tout de même vos idées
Modifié par linkev21 (08 May 2016 - 13:26)

Bonjour,

Je n'ai pas tout saisi, ton html (tes lignes de tableaux) sera créé par ton JEE ou par le javascript ?
Normalement j'aurais pensé par le java, alors pourquoi avoir besoin de transmettre ce nombre au JS ?

Mais sinon, si tu as besoin que ce soit dynamique, ton attribut nombre (que tu devrais plutôt rebaptiser data-nombre pour être valide), a-t'il la bonne information ? Parce que si oui, il est facile de récupérer ça en JS.
Modifié par SolidSnake (09 May 2016 - 14:34)

Bonjour,

Pour le tableau, il sera générer depuis javascript. Pour cette question, j'ai finalement réussi à le faire avec la méthode createElement pour créer mes td, tr, etc

En revanche, je n'arrive pas à récuperer mon attribut "nombre" que est donné par l'expression ${ mapModes.value.nbr }, le soucis est que je fais select on change puis dans le select un c for each pour parcourir ma map d'objet ModePaiement, du coup, si je fais

<select name="listeModes" id="listeModes" onchange="createArray(${ mapModes.value.nbr })"> 

Forcément, la valeur transmise est "undefined" et c'est bien logique.

J'ai ce genre de fonction au niveau js

	function createArray(x) {
	    viderTableau('modalite_table');
	    creerEnTete('modalite_table');
		for(var i = 0; i<x; i++){
			ajouterLigne('modalite_table');
		}
	}
	function creerEnTete(tableID){
	    var tableRef = document.getElementById(tableID);
	    var tr = document.createElement('tr');
	    var thfirst = document.createElement('th'); 
	    var thsecond = document.createElement('th');

	    thfirst.innerHTML="Sélection du compte bancaire";
	    thsecond.innerHTML="Référence de paiement";

	    tr.appendChild(thfirst);
	    tr.appendChild(thsecond);

	    tableRef.appendChild(tr);
	}

Mon code qui permet de sélectionner le mode de paiement :

<c:if test="${ !empty sessionScope.modesPaiement }">
<select name="listeModes" id="listeModes" onchange="createArray(${mapModes.value.nbr})">
	<c:forEach items="${ sessionScope.modesPaiement }" var="mapModes">
		<option value="${ mapModes.key }">${ mapModes.value.type }</option>
	</c:forEach>
</select>						
</c:if>

Merci d'avance pour ton aide.