Ajouter une ligne dans une tableau en jquery

Question

stephcache

3 Mar 2014 à 15:30

Bonjour, j'ai un tableau avec à la fin de chaque ligne la possibilité d'ajouter où de supprimer des lignes. je teste la possibilité pour l'instant d'ajouter des lignes, j'arrive à ajouter une ligne sur les lignes existante mais quand je veux ajouter une ligne en cliquant sur le plus des la ligne qui vient d'être ajouter se ne marche pas et je vois pas pourquoi. Une idée de la raison ?


<!DOCTYPE html>
<html lang = "fr">
	<head>
		<title>Logiciel de calcule de désenfumage</title>
		<meta charset = "UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="js/calcule-jquery.js"></script>
		<!--<script type="text/javascript" src="js/script.js"></script>-->
	</head>
	<body>
		<!--<script type="text/javascript" src="js/menu.js"></script>-->

		<header></header>

		<section>
			<table>
				<caption>
					Calcul de désenfumage mécanique
				</caption>
				<thead>
					<tr>
						<th>N°</th>
						<th>Emplacement</th>
						<th>Repére</th>
						<th>Largueur</th>
						<th>Hauteur</th>
						<th>Surface</th>
						<th>Vitesse mesuré</th>
						<th>Débit mesuré</th>
						<th>Largeur de couloir</th>
						<th>Année d'installation</th>
						<th>Nombre UP</th>
						<th>Nombre année d'air</th>
						<th>Débit théorique</th>
						<th>Marge 20 %</th>
						<th>Valeur de référence</th>
						<th>Débit correcte</th>
						<th>Ajouté/supprimé</th>
					</tr>
					<tr>
						<th></th>
						<th></th>
						<th></th>
						<th>En m</th>
						<th>En m</th>
						<th>En m²</th>
						<th>En m/s</th>
						<th>En m<sup>3</sup>/h</th>
						<th>En m</th>
						<th>Avant - Après</th>
						<th></th>
						<th></th>
						<th>En m<sup>3</sup>/h</th>
						<th>En m<sup>3</sup>/h</th>
						<th>En m<sup>3</sup>/h</th>
						<th></th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td><input type="text" size="45" name="emplacement_1" /></td>
						<td><input type="text" size="4" name="repere_1" /></td>
						<td><input type="text" size="6" name="largueur_1" title="Utilisé des points pas des virgueles" required /></td>
						<td><input type="text" size="6" name="hauteur_1" title="Utilisé des points pas des virgueles" required /></td>
						<td></td>
						<td><input type="text" size="8" name="vitesse_1" title="Utilisé des points pas des virgueles" required /></td>
						<td></td>
						<td><input type="text" size="6" name="couloir_1" title="Utilisé des points pas des virgueles" /></td>
						<td>
							<input type="radio" name="annee_1" />
							<b> 2004 </b>
							<input type="radio" name="annee_1" />
						</td>
						<td></td>
						<td><input type="number" name="nombre_1" min="1" max="9" /></td>
						<td></td>
						<td></td>
						<td><input type="text" size="6" name="reference_1" /></td>
						<td><img src="image/valide.png"> - <img src="image/non_valide.png"></td>
						<td><img src="image/ajout.png"> - <img src="image/sup.png"></td>
					</tr>
					<tr>
						<td>2</td>
						<td><input type="text" size="45" name="emplacement_2" /></td>
						<td><input type="text" size="4" name="repere_2" /></td>
						<td><input type="text" size="6" name="largueur_2" title="Utilisé des points pas des virgueles" required /></td>
						<td><input type="text" size="6" name="hauteur_2" title="Utilisé des points pas des virgueles" required /></td>
						<td></td>
						<td><input type="text" size="8" name="vitesse_2" title="Utilisé des points pas des virgueles" required /></td>
						<td></td>
						<td><input type="text" size="6" name="couloir_2" title="Utilisé des points pas des virgueles" /></td>
						<td>
							<input type="radio" name="annee_2" />
							<b> 2004 </b>
							<input type="radio" name="annee_2" />
						</td>
						<td></td>
						<td><input type="number" name="nombre_2" min="1" max="9" /></td>
						<td></td>
						<td></td>
						<td><input type="text" size="6" name="reference_2" /></td>
						<td><img src="image/valide.png"> - <img src="image/non_valide.png"></td>
						<td><img src="image/ajout.png"> - <img src="image/sup.png"></td>
					</tr>
				</tbody>
			</table>
		</section>

		<footer></footer>
	</body>
</html>


html, body {margin: 0; padding: 0; font-family: comic sans ms; font-size: 10px; box-sizing: border-box;}
a:link, a:visited, a:active, a:hover {text-decoration: none; color: #000;}
form {display: inline-block;}

section table {width: 100%; display: block; border-collapse: collapse;}

section caption
	{
		width: 100%;
		height: 25px;
		line-height: 25px;
		vertical-align: middle;
		display: block;
		background-color: #15C61B;
		font-size: 16px;
		border-bottom: 1px solid black;
	}

section thead {background-color: #F4BA1A; border-bottom: 1px solid black;}
section thead tr th {border-right: 1px solid black; padding: 0px 3px;}
section thead tr th:last-child {border-right: none;}
section thead tr th:first-child {width: 16px;}
section thead tr th:nth-child(2) {width: 200px;}
section thead tr th:nth-child(9) {width: 50px;}
section tbody tr td:nth-child(12) {width: 65px;}
section tbody tr td:nth-child(13) {width: 45px;}
section tbody tr td:nth-child(15) {width: 45px;}
section tbody tr td:nth-child(16) {width: 45px;}

section tbody tr {height: 20px; line-height: 20px; vertical-align: middle; border-bottom: 1px solid black;}
section tbody tr td {text-align: center;}
section tbody tr td input {font-size: 10px; text-align: center; border: 1px solid black;}
section tbody tr:nth-child(odd) {background-color: #7AB5F9;}
section tbody tr:nth-child(even) {background-color: #DA7AF9;}
section tbody tr td img {position: relative; top: 3px;}
section tbody tr td:nth-last-child(2) img {opacity: 0.2;}


$(function()
{
	$("img").each
	(
		function()
		{
			$(this).bind
			(
				{
					click : function(e)
					{
						console.log($(this));
						var image = $(this)[0].src;
						//console.log(image);
						var fichier = image.split("/");
						//console.log(fichier[7]);
						var action = fichier[7].split(".");
						console.log(action[0]);
						var ligne = $(this)[0].parentElement.parentElement.cells[0].innerText;
						console.log(ligne);
						//$(this).parents("tr").eq(0).clone().insertAfter($(this)[0].parentElement.parentElement);
						var id = +ligne + 1;
						$("<tr><td>" + id + "</td><td><input type=\"text\" size=\"45\" name=\"emplacement_" + id + "\" /></td><td><input type=\"text\" size=\"4\" name=\"repere_" + id + "\" /></td><td><input type=\"text\" size=\"6\" name=\"largueur_" + id + "\" title=\"Utilisé des points pas des virgueles\" required /></td><td><input type=\"text\" size=\"6\" name=\"hauteur_" + id + "\" title=\"Utilisé des points pas des virgueles\" required /></td><td></td><td><input type=\"text\" size=\"8\" name=\"vitesse_" + id + "\" title=\"Utilisé des points pas des virgueles\" required /></td><td></td><td><input type=\"text\" size=\"6\" name=\"couloir_" + id + "\" title=\"Utilisé des points pas des virgueles\" /></td><td><input type=\"radio\" name=\"annee_" + id + "\" /><b> 2004 </b><input type=\"radio\" name=\"annee_" + id + "\" /></td><td></td><td><input type=\"number\" name=\"nombre_" + id + "\" min=\"1\" max=\"9\" /></td><td></td><td></td><td><input type=\"text\" size=\"6\" name=\"reference_" + id + "\" /></td><td><img src=\"image/valide.png\"> - <img src=\"image/non_valide.png\"></td><td><img src=\"image/ajout.png\"> - <img src=\"image/sup.png\"></td></tr>").insertAfter($(this)[0].parentElement.parentElement);
					}
				}
			)
		}
	);

	$("input").each
	(
		function()
		{
			$(this).bind
			(
				{
					change : function(e)
					{
						//console.log($(this));
						var largueur = $(this)[0].parentElement.parentElement.cells[3].children[0].value;
						var hauteur = $(this)[0].parentElement.parentElement.cells[4].children[0].value;
						var v_mesure = $(this)[0].parentElement.parentElement.cells[6].children[0].value;
						var l_couloir = $(this)[0].parentElement.parentElement.cells[8].children[0].value;
						var n_amene_air = $(this)[0].parentElement.parentElement.cells[11].children[0].value;
						var av = $(this)[0].parentElement.parentElement.cells[9].children[0].checked;
						var ap = $(this)[0].parentElement.parentElement.cells[9].children[2].checked;
						var valeur_ref = $(this)[0].parentElement.parentElement.cells[14].children[0].value;
						var valide = $(this)[0].parentElement.parentElement.cells[15].children[0];
						var non_valide = $(this)[0].parentElement.parentElement.cells[15].children[1];

						if(largueur != "" && hauteur != "")
						{
							var surface = largueur * hauteur;
							$($(this)[0].parentElement.parentElement.cells[5]).text(surface.toFixed(2));
						}

						if(surface != "" && v_mesure != "")
						{
							var debit_mesure = surface * v_mesure * 3600;
							$($(this)[0].parentElement.parentElement.cells[7]).text(debit_mesure.toFixed(0));
						}

						if(l_couloir != "")
						{
							var nombre_up = "";
							if(l_couloir <= 0.9) {nombre_up = 1;}
							else if(l_couloir > 0.9 && l_couloir <= 1.4) {nombre_up = 2;}
							else if(l_couloir > 1.4 && l_couloir <= 1.8) {nombre_up = 3;}
							else if(l_couloir > 1.8)
							{
								var n_up = l_couloir/0.6;
								//console.log(n_up);
								if(!ap) {nombre_up = Math.floor(n_up);}
								else if(!av) {nombre_up = Math.ceil(n_up);}
							}
							$($(this)[0].parentElement.parentElement.cells[10]).text(nombre_up);
						}

						if(l_couloir != "" && nombre_up != "" && n_amene_air != "")
						{
							var debit_theorique = nombre_up * n_amene_air * 0.5 * 3600;
							$($(this)[0].parentElement.parentElement.cells[12]).text(debit_theorique.toFixed(0));
						}

						if(debit_mesure != "")
						{
							var marge = debit_mesure + ((debit_mesure * 20) / 100);
							$($(this)[0].parentElement.parentElement.cells[13]).text(marge.toFixed(0));
						}

						if((debit_mesure != "" && valeur_ref) || (debit_mesure != "" && debit_theorique != "" && marge != ""))
						{
							if(debit_mesure != "" && valeur_ref != "" && marge != "")
							{
								if((debit_mesure >= valeur_ref) || (marge >= valeur_ref))
								{
									valide.style.opacity = 1;
									non_valide.style.opacity = 0.2;
								}
								else if((debit_mesure < valeur_ref) || (marge < valeur_ref))
								{
									non_valide.style.opacity = 1;
									valide.style.opacity = 0.2;
								}
							}
							else if(debit_mesure != "" && debit_theorique != "" && marge != "")
							{
								if((debit_mesure >= debit_theorique) || (marge >= debit_theorique))
								{
									valide.style.opacity = 1;
									non_valide.style.opacity = 0.2;
								}
								else if((debit_mesure < debit_theorique) || (marge < debit_theorique))
								{
									non_valide.style.opacity = 1;
									valide.style.opacity = 0.2;
								}
							}
						}
					}
				}
			)
		}
	);
});

DJousto

4 Mar 2014 à 08:01

Bonjour,

je n'ai pas regardé ton code en détail, mais je pense que ton problème vient d'une "erreur" ou oubli assez classique en javascript. Dans ton code javascript actuel (si j'ai bien compris) tu crée des callback (via .bind) sur les objets de type "img". Mais ces liens entre "img" et callbacks ne sont évidemment créés que pour les lignes existantes.
Tu l'aura compris, quand une nouvelle ligne créée, son objet "img" qui est nouveau, n'est pas lié au callback, et en cliquant sur cet objet il ne se passe rien.

Il faut réorganiser ton code, après le rajout d'une ligne tu doit rajouter les callbacks nécessaires.

stephcache

4 Mar 2014 à 11:33

Oui en faite sa venait d'un oubli en faite et j'ai utilisé la fonction clone() donc la ligne commenté et j'ai supprimer l'ajout manuel de la ligne puis dans la fonction clone() j'ai mit true et la j'ai récupéré l'événement sur les images et les input.

Par conte une fois la ligne clonée, elle se place bien ou je veux mais sa à aussi cloné les donnée contenus dans les input. Tu serrais pas comment on fait pour ne pas avoir les donnée ou les effacé de façon simple ?

DJousto

4 Mar 2014 à 18:35

Non, la fonction clone() copie tout, et donc tu te retrouves avec le "clone" de ton objet (y compris les id) ensuite tu peux effectivement supprimer le contenu et le reconstruire mais çà fait usine à gaz.

Je pense qu'il vaut mieux rester sur la méthode d'ajout, mais utiliser les "delegated events" plutot qu'un bind(), voir les explications ici api.jquery.com/on/, çà nécessite une réorganisation de ton code mais çà sera surement plus propre.

stephcache

4 Mar 2014 à 19:27

En faite j'ai trouvé une autre solution qui me satisfait totalement. Voilà mon code fonctionne comme je le souhaite. Par conte je veux bien des infos sur comment enregistré le tous en XML via Node webkit.


<!DOCTYPE html>
<html lang = "fr">
	<head>
		<title>Logiciel de calcule de désenfumage</title>
		<meta charset = "UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="js/calcule-jquery.js"></script>
		<!--<script type="text/javascript" src="js/script.js"></script>-->
	</head>
	<body>
		<!--<script type="text/javascript" src="js/menu.js"></script>-->

		<header></header>

		<section>
			<table>
				<caption>
					Calcul de désenfumage mécanique
				</caption>
				<thead>
					<tr>
						<th>N°</th>
						<th>Emplacement</th>
						<th>Repére</th>
						<th>Largueur</th>
						<th>Hauteur</th>
						<th>Surface</th>
						<th>Vitesse mesuré</th>
						<th>Débit mesuré</th>
						<th>Largeur de couloir</th>
						<th>Année d'installation</th>
						<th>Nombre UP</th>
						<th>Nombre année d'air</th>
						<th>Débit théorique</th>
						<th>Marge 20 %</th>
						<th>Valeur de référence</th>
						<th>Débit correcte</th>
						<th>Ajouté/supprimé</th>
					</tr>
					<tr>
						<th></th>
						<th></th>
						<th></th>
						<th>En m</th>
						<th>En m</th>
						<th>En m²</th>
						<th>En m/s</th>
						<th>En m<sup>3</sup>/h</th>
						<th>En m</th>
						<th>Avant - Après</th>
						<th></th>
						<th></th>
						<th>En m<sup>3</sup>/h</th>
						<th>En m<sup>3</sup>/h</th>
						<th>En m<sup>3</sup>/h</th>
						<th></th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td></td>
						<td><input type="text" size="45" name="emplacement" /></td>
						<td><input type="text" size="4" name="repere" /></td>
						<td><input type="text" size="6" name="largueur" title="Utilisé des points pas des virgueles" required /></td>
						<td><input type="text" size="6" name="hauteur" title="Utilisé des points pas des virgueles" required /></td>
						<td></td>
						<td><input type="text" size="8" name="vitesse" title="Utilisé des points pas des virgueles" required /></td>
						<td></td>
						<td><input type="text" size="6" name="couloir" title="Utilisé des points pas des virgueles" /></td>
						<td>
							<input type="radio" name="annee" />
							<b> 2004 </b>
							<input type="radio" name="annee" />
						</td>
						<td></td>
						<td><input type="number" name="nombre" min="1" max="9" value="1" /></td>
						<td></td>
						<td></td>
						<td><input type="text" size="6" name="reference" /></td>
						<td><img src="image/valide.png"> - <img src="image/non_valide.png"></td>
						<td><img src="image/ajout.png"> - <img src="image/sup.png"></td>
					</tr>
					<tr>
						<td>1</td>
						<td><input type="text" size="45" name="emplacement_1" /></td>
						<td><input type="text" size="4" name="repere_1" /></td>
						<td><input type="text" size="6" name="largueur_1" title="Utilisé des points pas des virgueles" required /></td>
						<td><input type="text" size="6" name="hauteur_1" title="Utilisé des points pas des virgueles" required /></td>
						<td></td>
						<td><input type="text" size="8" name="vitesse_1" title="Utilisé des points pas des virgueles" required /></td>
						<td></td>
						<td><input type="text" size="6" name="couloir_1" title="Utilisé des points pas des virgueles" /></td>
						<td>
							<input type="radio" name="annee_1" />
							<b> 2004 </b>
							<input type="radio" name="annee_1" />
						</td>
						<td></td>
						<td><input type="number" name="nombre_1" min="1" max="9" value="1" /></td>
						<td></td>
						<td></td>
						<td><input type="text" size="6" name="reference_1" /></td>
						<td><img src="image/valide.png"> - <img src="image/non_valide.png"></td>
						<td><img src="image/ajout.png"> - <img src="image/sup.png"></td>
					</tr>
				</tbody>
			</table>
		</section>

		<footer></footer>
	</body>
</html>


html, body {margin: 0; padding: 0; font-family: comic sans ms; font-size: 10px; box-sizing: border-box;}
a:link, a:visited, a:active, a:hover {text-decoration: none; color: #000;}
form {display: inline-block;}

section table {width: 100%; display: block; border-collapse: collapse;}

section caption
	{
		width: 100%;
		height: 25px;
		line-height: 25px;
		vertical-align: middle;
		display: block;
		background-color: #15C61B;
		font-size: 16px;
		border-bottom: 1px solid black;
	}

section thead {background-color: #F4BA1A; border-bottom: 1px solid black;}
section thead tr th {border-right: 1px solid black; padding: 0px 3px;}
section thead tr th:last-child {border-right: none;}
section thead tr th:first-child {width: 16px;}
section thead tr th:nth-child(2) {width: 200px;}
section thead tr th:nth-child(9) {width: 50px;}
section tbody tr td:nth-child(12) {width: 65px;}
section tbody tr td:nth-child(13) {width: 45px;}
section tbody tr td:nth-child(15) {width: 45px;}
section tbody tr td:nth-child(16) {width: 45px;}

section tbody tr:first-child {display: none;}
section tbody tr {height: 20px; line-height: 20px; vertical-align: middle; border-bottom: 1px solid black;}
section tbody tr td {text-align: center;}
section tbody tr td input {font-size: 10px; text-align: center; border: 1px solid black;}
section tbody tr:nth-child(odd) {background-color: #7AB5F9;}
section tbody tr:nth-child(even) {background-color: #DA7AF9;}
section tbody tr td img {position: relative; top: 3px;}
section tbody tr td:nth-last-child(2) img {opacity: 0.2;}


$(function()
{
	$("img").each
	(
		function()
		{
			$(this).bind
			(
				{
					click : function(e)
					{
						console.log($(this));
						var image = $(this)[0].src;
						//console.log(image);
						var fichier = image.split("/");
						//console.log(fichier[7]);
						var type = fichier[7].split(".");
						//console.log(type[0]);
                                                var action = type[0];
						if(action = "ajout")
						{
							$("tbody > tr").eq(0).clone(true).insertAfter($(this)[0].parentElement.parentElement);
						}
						else if(action = "sup")
						{
							$($(this)[0].parentElement.parentElement).remove();
						}
						var id = "1";
						$("tbody > tr:gt(0)").each
						(
							function()
							{
								//console.log($(this));
								$($(this)[0].cells[0]).text(id);
								$($(this)[0].cells[1].children[0]).attr("name", "emplacement_" + id);
								$($(this)[0].cells[2].children[0]).attr("name", "repere_" + id);
								$($(this)[0].cells[3].children[0]).attr("name", "largueur_" + id);
								$($(this)[0].cells[4].children[0]).attr("name", "hauteur_" + id);
								$($(this)[0].cells[6].children[0]).attr("name", "vitesse_" + id);
								$($(this)[0].cells[8].children[0]).attr("name", "couloir_" + id);
								$($(this)[0].cells[9].children[0]).attr("name", "annee_" + id);
								$($(this)[0].cells[9].children[2]).attr("name", "annee_" + id);
								$($(this)[0].cells[11].children[0]).attr("name", "nombre_" + id);
								$($(this)[0].cells[14].children[0]).attr("name", "reference_" + id);
								id++;
							}
						)
					}
				}
			)
		}
	);

	$("input").each
	(
		function()
		{
			$(this).bind
			(
				{
					change : function(e)
					{
						//console.log($(this));
						var largueur = $(this)[0].parentElement.parentElement.cells[3].children[0].value;
						var hauteur = $(this)[0].parentElement.parentElement.cells[4].children[0].value;
						var v_mesure = $(this)[0].parentElement.parentElement.cells[6].children[0].value;
						var l_couloir = $(this)[0].parentElement.parentElement.cells[8].children[0].value;
						var n_amene_air = $(this)[0].parentElement.parentElement.cells[11].children[0].value;
						var av = $(this)[0].parentElement.parentElement.cells[9].children[0].checked;
						var ap = $(this)[0].parentElement.parentElement.cells[9].children[2].checked;
						var valeur_ref = $(this)[0].parentElement.parentElement.cells[14].children[0].value;
						var valide = $(this)[0].parentElement.parentElement.cells[15].children[0];
						var non_valide = $(this)[0].parentElement.parentElement.cells[15].children[1];

						if(largueur != "" && hauteur != "")
						{
							var surface = largueur * hauteur;
							$($(this)[0].parentElement.parentElement.cells[5]).text(surface.toFixed(2));
						}

						if(surface != "" && v_mesure != "")
						{
							var debit_mesure = surface * v_mesure * 3600;
							$($(this)[0].parentElement.parentElement.cells[7]).text(debit_mesure.toFixed(0));
						}

						if(l_couloir != "")
						{
							var nombre_up = "";
							if(l_couloir <= 0.9) {nombre_up = 1;}
							else if(l_couloir > 0.9 && l_couloir <= 1.4) {nombre_up = 2;}
							else if(l_couloir > 1.4 && l_couloir <= 1.8) {nombre_up = 3;}
							else if(l_couloir > 1.8)
							{
								var n_up = l_couloir/0.6;
								//console.log(n_up);
								if(!ap) {nombre_up = Math.floor(n_up);}
								else if(!av) {nombre_up = Math.ceil(n_up);}
							}
							$($(this)[0].parentElement.parentElement.cells[10]).text(nombre_up);
						}

						if(l_couloir != "" && nombre_up != "" && n_amene_air != "")
						{
							var debit_theorique = nombre_up * n_amene_air * 0.5 * 3600;
							$($(this)[0].parentElement.parentElement.cells[12]).text(debit_theorique.toFixed(0));
						}

						if(debit_mesure != "")
						{
							var marge = debit_mesure + ((debit_mesure * 20) / 100);
							$($(this)[0].parentElement.parentElement.cells[13]).text(marge.toFixed(0));
						}

						if((debit_mesure != "" && valeur_ref) || (debit_mesure != "" && debit_theorique != "" && marge != ""))
						{
							if(debit_mesure != "" && valeur_ref != "" && marge != "")
							{
								if((debit_mesure >= valeur_ref) || (marge >= valeur_ref))
								{
									valide.style.opacity = 1;
									non_valide.style.opacity = 0.2;
								}
								else if((debit_mesure < valeur_ref) || (marge < valeur_ref))
								{
									non_valide.style.opacity = 1;
									valide.style.opacity = 0.2;
								}
							}
							else if(debit_mesure != "" && debit_theorique != "" && marge != "")
							{
								if((debit_mesure >= debit_theorique) || (marge >= debit_theorique))
								{
									valide.style.opacity = 1;
									non_valide.style.opacity = 0.2;
								}
								else if((debit_mesure < debit_theorique) || (marge < debit_theorique))
								{
									non_valide.style.opacity = 1;
									valide.style.opacity = 0.2;
								}
							}
						}
					}
				}
			)
		}
	);
});

Modifié par stephcache (04 Mar 2014 - 19:41)

Sujet clos

JavaScript, DOM et API Web HTML5

Ajouter une ligne dans une tableau en jquery