[2.x] [Symfony] Créer celulle dynamiquement dans un tableau

Bonjour à tous,

J'ai un petit soucis, je m'explique :

J'ai un tableau de produits (pour passer des commandes), j'ai besoin, lors du clic sur l'image + (Dans mon code, balise img id : ajouterstock) , d'ajouter une "ligne" en dessous de celle cliqué précédemment (pour faire de la "multi-commande" en quelques sortes.

Mon tableau :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<table id = "articlescommande">
	<tr id = "thgris">
		<th style="width : 40px">N°</th>
		<th style="width : 450px">Désignation</th>
		<th style="width : 150px">Conditionnement</th>
		<th>Quantité</th>
	</tr>
{% for produit in produits %}
			<tr {% if mesproduits[produit.idarticle] is defined %} id = "ligneaveccommande" {% else %} id = "colgris"  {% endif %}>
			<td {% if mesproduits[produit.idarticle] is defined %} id = "quantitecomd" {% endif %} style="text-align : center">{{ produit.numordre }}</td>
			<td {% if mesproduits[produit.idarticle] is defined %} id = "quantitecomd" {% endif %} style="text-align : center">{{ produit.designation|convert_encoding('ISO-8859-1', 'UTF-8') ~ ' ' ~ produit.idarticle}}</td>
			<td {% if mesproduits[produit.idarticle] is defined %} id = "quantitecomd" {% endif %} style="text-align : center">{% if produit.idpackaging == 3 %}Point. : <select id = {{ "lespointures" ~ produit.idarticle}} name = "{{ "lespointures" ~ produit.idarticle}}">{% for p in lespointures[produit.idarticle] %}<option>{{ p }}</option> {% endfor %}</select> {% elseif produit.idpackaging == 2 %}Taille : <select id = "{{ "lestailles" ~ produit.idarticle}}" name = "{{ "lestailles" ~ produit.idarticle}}">{% for p in lestailles[produit.idarticle] %}<option>{{ p }}</option> {% endfor %}</select> {% else %}{{ produit.unite|convert_encoding('ISO-8859-1', 'UTF-8') }}{% endif %}</td>
			<td {% if mesproduits[produit.idarticle] is defined %} id = "quantitecomd" {% endif %} style="text-align : center"><input id = "inputsombre" name = {{ "quantitecmd" ~ produit.idarticle }} class = "quantitecmd" type = "text" {% if mesproduits[produit.idarticle] is defined %} value = " {{ mesproduits[produit.idarticle] }}" {% else %} value = "0" {% endif %}/></td>
			{% if produit.idpackaging != 1 %}<td  id = "ajouterstock"><img src="{{ asset('Ressources/images/plusstock.png') }}" id = "imgajouterstock" onclick = "javascript:morefield()"></td>{% endif %}
			<td id = "celullephoto">{% if (produit.lienimage is not null) or (produit.lienimage != '') %} <img src="{{ asset('Ressources/images/loupe.png') }}" height = "20px" onclick = "javascript:popup('{{ path('detailArticle', { 'id': produit.idarticle }) }}')"/> {% endif %}</td>
 
			</tr>
 
{% endfor %}

J'ai esseyer en JS avec quelques solutions trouvée sur des forums mais rien y fait... :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type = "text/javascript">
		function morefield()
		{
		var tableau = document.getElementById("articlescommande");
		var ligne = document.createElement("tr");
		cellule1 = document.createElement("td");
		cellule2 = document.createElement("td");
		cellule3 = document.createElement("td");
		cellule4 = document.createElement("td");
		ligne.appendChild(cellule1);
		ligne.appendChild(cellule2);
		ligne.appendChild(cellule3);
		ligne.appendChild(cellule4);
		tableau.appendChild(ligne);
		}
	</script>

Voila, J'espere avoir été suffisamment clair, et merci d'avance pour votre aide.