Tableau : Clonage incohérance de résultat

Résolu
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - 2 avril 2014 à 12:12
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - 4 avril 2014 à 11:51
Bonjour,

Voila se que je voudrait que se code face:
1- New(ligne) copie la ligne "Originale" du tableau.
2- NewT(Tableau) copie les titre + la ligne "Originale"

Voila se que se code fait
1- New(ligne) copie la ligne "Originale" du tableau.
2- NewT(Tableau) copie tout le tableau original exp:
- Si on copie le tableau avant la ligne la 1ére copie sera juste
- Mais si on copie d'abord une ligne puis le tableau, on aura pas seulement la copie de l'entête et la ligne "originale" mais la copie du tableau et de toute ses ligne.

Voila mon code : (je sait qu'il est incorrect mais quand je pense qu'il devrait fonctionner il marche encor moins bien que sa)

<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_Add_Line.js" ></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
	<script type="text/javascript" src="JS/JS_Lanceur.js" ></script>
</head>

<body>
	<input type="button" name="NTab" id=""  size="3" value="NewT" 
					onclick="CloneTab(Original_Tab.parentNode.parentNode);">
	</input>

<div id="ab">
	
	<table id="Partie_Basse_Table" border="2">
	<tbody>
		<tr align="center"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Original_Tab">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="CloneLine(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id=""  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>				
		</tr>	
		
	</tbody>
	</table>
</div>

						
					

</body>
</html>


Merci

9 réponses

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
2 avril 2014 à 13:06
Voila j'ai fais quelque modification mais je n'arrive toujours pas a ne cloner que l'entête et la 1er ligne.

<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_Add_Line.js" ></script>	
	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
	<script type="text/javascript" src="JS/JS_Lanceur.js" ></script>
</head>

<body>

<script type="text/javascript">
  $(function() 
  {
   $('#popupDatepicker').datepick();
   
   $('#inlineDatepicker').datepick({onSelect:function(dateText){
      document.getElementById("DATE1").value =dateText;
    }
   });
});
</script>

<div id="inlineDatepicker"></div>

<br>

	<input type="button" name="NTab" id=""  size="3" value="NewT" 
					onclick="CloneTab(Tab.parentNode.parentNode);">
	</input>
	
<fieldset id="Partie_Basse_Fieldset">
<legend> DAILY TIMETABLE per request</legend>

<div name="MesLignes" id="Partie_Basse_Div">
	<table id="Partie_Basse_Table" border="2">
	<tbody>
		<tr align="center" id="Tab"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Line">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="CloneLine(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id=""  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>										
		</tr>	
	</tbody>
	</table>
</div>	
<div></div>
</fieldset> 


</body>
</html>


Voila le script :
function CloneTab(Tab, index)
{
	newTab = Tab.cloneNode(true); 
	Tab.parentNode.appendChild(newTab)
}

function CloneLine(Line, index)
{
	newLine = Line.cloneNode(true); 
	Line.parentNode.appendChild(newLine);
}
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
2 avril 2014 à 15:00
Bonjour ,
J'ai trouver un moyen de cloner avec jquery mais sa bug :

<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
	<script type="text/javascript" src="JS/JS_Lanceur.js" ></script>
		
</head>

<body>

<div id="inlineDatepicker"></div>

 <input type="date" name="DATE1" id="DATE1"  size="9" value="" readonly="readonly"></input>

<br>
<button id="NTab">NewT</button>

<fieldset id="Partie_Basse_Fieldset">
<legend> DAILY TIMETABLE per request</legend>

<div name="MesLignes" id="Partie_Basse_Div">
	<table id="Partie_Basse_Table" border="2">
	<tbody class="O_Tab">
		<tr align="center" id="Tab"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Line">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="CloneLine(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id=""  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>										
		</tr>	
	</tbody>
	
	</table>
</div>
</fieldset> 


	<script type="text/javascript">
	$(function() 
	{
		$('#popupDatepicker').datepick(); 
		$('#inlineDatepicker').datepick(
		{
			onSelect:function(dateText)
			{
				document.getElementById("DATE1").value =dateText;
			}
		});
	});
	</script>	
	
	<script type="text/javascript">
	

	function CloneLine(Line, index)
	{
		newLine = Line.cloneNode(true); 
		Line.parentNode.appendChild(newLine);
	}
	</script>
	
	<script type="text/javascript">
	$('#inlineDatepicker').click(function () {
 
	  $('.O_Tab').clone().insertAfter(".O_Tab");
 
    });
	</script>	
	
</body>
</html>


Au premier clonage sa fait bien une copie mais au deuxième sa m'en fait 4. Pourquoi comment régler se problème?
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
2 avril 2014 à 16:03
ET après quatre demande de clone Firefox bug
0
@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 146
Modifié par kazma le 2/04/2014 à 17:21
bonjour

et comme ca


function CloneTab(Tab, index)
{
 var tbl=document.getElementById("Partie_Basse_Table")
 var newTab = tbl.rows[0].cloneNode(true); 
 newTab=Tab.parentNode.appendChild(newTab)
 
 var newTab2 = tbl.rows[1].cloneNode(true);
 Tab.parentNode.appendChild(newTab2)
 
}


<input type="button" name="NTab" id=""  size="3" value="NewT" 
onclick="CloneTab(Tab);">
</input>

cours Forest cours !
0
@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 146
2 avril 2014 à 17:44
et la fonction cloneLine

function CloneLine(Line)
{
	newLine = Line.cloneNode(true); 
	Line.parentNode.insertBefore(newLine,Line)

} 

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
2 avril 2014 à 19:22
Bonjour,
Oui sa me permet en effet de cloner la partie du tableau que je veut. Maintenant il faut pouvoir le faire plus d'une fois.
merci
0
@karamel Messages postés 1829 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 25 mai 2023 146
2 avril 2014 à 21:28
la quand je teste ca clone a moins d'avoir pas tous compris

il donne quoi ce code

<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_Add_Line.js" ></script>	
	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
	<script type="text/javascript" src="JS/JS_Lanceur.js" ></script>
</head>

<body>

<script type="text/javascript">
  $(function() 
  {
   $('#popupDatepicker').datepick();
   
   $('#inlineDatepicker').datepick({onSelect:function(dateText){
      document.getElementById("DATE1").value =dateText;
    }
   });
});

function CloneTab(Tab, index)
{
	var tbl=document.getElementById("Partie_Basse_Table")
	var newTab = tbl.rows[0].cloneNode(true); 
	newTab=Tab.parentNode.appendChild(newTab)
	
	var newTab2	= tbl.rows[1].cloneNode(true);
	Tab.parentNode.appendChild(newTab2)
	
}

function CloneLine(Line)
{
	newLine = Line.cloneNode(true); 
	Line.parentNode.insertBefore(newLine,Line)
	//Line.parentNode.appendChild(newLine);
}


</script>

<div id="inlineDatepicker"></div>

<br>

	<input type="button" name="NTab" id=""  size="3" value="NewT" 
					onclick="CloneTab(Tab);">
	</input>
	
<fieldset id="Partie_Basse_Fieldset">
<legend> DAILY TIMETABLE per request</legend>

<div name="MesLignes" id="Partie_Basse_Div">
	<table id="Partie_Basse_Table" border="2">
	<tbody>
		<tr align="center" id="Tab"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Line">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="CloneLine(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id=""  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>										
		</tr>	
	</tbody>
	</table>
</div>	
<div></div>
</fieldset> 


</body>
</html>


0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
Modifié par EnguerrandP le 3/04/2014 à 08:37
Bonjour, je vient de re-tester se code et le code marche parfaitement comme souhaiter je pense que les problème d'hier soir sont du au faite que mon ordinateur personnel a mon domicile soit un mac et non un Windows.
Mais il faut quand même que je trouve une solution pour qu'il marche avec le calendrier.
Merci pour ton aide.
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
2 avril 2014 à 22:33
Sa ne fait qu'un seul clone. mais j'ai du abandonner se code pour le passer en jquery car je n'arriver pas a lier l'appuis ur le calendrier et le clonage je travaille sur se code actuellement :
<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_JQuery-1.11.0.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
	<script type="text/javascript" src="JS/JS_Lanceur.js" ></script>
		
</head>

<body>

<div id="inlineDatepicker"></div>

<br>

<fieldset id="Partie_Basse_Fieldset">
<legend> DAILY TIMETABLE per request</legend>

<!-- définir Partie_Basse_Div comme un onglet ainsie que chaqun de ses clone -->
<div name="MesLignes" id="Partie_Basse_Div">
	<table id="Partie_Basse_Table" border="2">
	<tbody class="O_Tab">
		<tr align="center" id="Tab"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Line">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="CloneLine(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id="TDate"  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>										
		</tr>
		
	</tbody>	
	</table>
</div>
</fieldset> 

	<div name="titi" id="toto">
		 <!-- lier au calendrier les appel des onglets -->
		 <!-- lors du clonnage ajouter le lien de l'onglet au calendrier -->
   		 <p> <a href="#Partie_Basse_Div" name="liens"> DIV 1 </a></p>
   		 <p> <a href="#Partie_Basse_Div_2" name="liens"> DIV 2 </a></p>
   		 <p> <a href="#Partie_Basse_Div_3" name="liens"> DIV 3 </a></p>
	</div>

<!-- cloner Partie_Basse_Div lors de l'init faire apparaitre le clone et rendre l'original invisible -->	
<script type="text/javascript">
	var cloneCount = 1;
	$('#inlineDatepicker').click
	(
		function () 
		{
				<!-- clone le tableau -->
				$("#Partie_Basse_Table").clone().insertAfter("#Partie_Basse_Table");
				<!-- modifie l'id du clone -->
				$("#Partie_Basse_Table").clone().attr('Partie_Basse_Table', 'Partie_Basse_Table'+'_'+ cloneCount++).after("#Partie_Basse_Table");
		}
	);
</script>	
	
<script type="text/javascript">
	$(function() 
	{
		$('#popupDatepicker').datepick(); 
		$('#inlineDatepicker').datepick(
		{
			onSelect:function(dateText)
			{
				<!-- modifie la valeur de TDate -->
				document.getElementById("TDate").value =dateText;
			}
		});
	});
</script>	
	
<script type="text/javascript">
	function CloneLine(Line, index)
	{
		newLine = Line.cloneNode(true); 
		Line.parentNode.appendChild(newLine);
	}
</script>

<script type="text/javascript">
	$("a[name='liens']").click
	(
		function()
		{
		var target=$(this).attr('href');
			$("div[name='MesLignes']").hide();
			$(target).show();    
		}
	);
</script>
	
</body>
</html>


et je rencontre le même problème que précédemment j'ai donc penser a une solution mais je n'arrive pas a la mettre en place?
Sa serai à l'ouverture de la page cloner le tableau original le masquer et mettre en visuel la copie (comme sa le patron reste inchangé).

Merci
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
3 avril 2014 à 08:59
Bonjour, je vient de faire quelque modification sur le code de clonage de Kazma pour qu'il reconnaisse l'appuie sur le calendrier pour le clonage problème il ne marche que pour la 1er copie.
Pourquoi ?
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
4 avril 2014 à 11:51
Bonjour,
Voila comment je vais procéder:
(Se n'est pas vraiment la "vrai" solution a mon problème mais plutôt un moyen de le contourner.)
1- Cloné le tableau
2- Masquer l'original
Ainsi on ne pourra pas modifier l'original et on clonera toujours le tableau "original" de base.
Merci
0