Tableau : Clonage incohérance de résultat [Résolu]

Signaler
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
-
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

Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
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);
}
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
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?
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
ET après quatre demande de clone Firefox bug
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
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 !
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
et la fonction cloneLine

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

} 

Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
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
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
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>


Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
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.
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
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
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
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 ?
Messages postés
295
Date d'inscription
vendredi 26 avril 2013
Statut
Membre
Dernière intervention
15 juillet 2015
1
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