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

Question

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

Signaler

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

A voir également:

Tableau : Clonage incohérance de résultat
Problème pour colorer les lignes de mon tableau en fonction du resultat d'une co ✓ - Forum - PHP
C / C++ / C++.NET : Tierce : tri tableau, calcul combinaisons et affichage des resultats - CodeS So - Guide
Pour mettre le resultat d'une requete dans un tableau sur plusieurs colonne - Codes sources - PHP (Astuces)
PHP : Recuperation du resultat d'une requete mysql dans un tableau javascript - CodeS SourceS - Guide
ASP / ASP.NET : Recuperer le resultat d'une requete dans un tableau ou un tableau n dimension fai - Guide

9 réponses

Répondre Posez votre question

EnguerrandP · Answer 1 · 2014-04-02T13:06:41+0200

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);
}

EnguerrandP · Answer 2 · 2014-04-02T15:00:08+0200

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?

@karamel · Answer 3 · 2014-04-02T17:17:10+0200

Réponse 3 / 9

@karamel

Messages postés: 1784
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 28 avril 2021

126
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 !

@karamel · Answer 4 · 2014-04-02T17:44:47+0200

Réponse 4 / 9

@karamel

Messages postés: 1784
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 28 avril 2021

126
2 avril 2014 à 17:44

et la fonction cloneLine

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

}

EnguerrandP · Answer 5 · 2014-04-02T19:22:54+0200

Réponse 5 / 9

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

@karamel · Answer 6 · 2014-04-02T21:28:25+0200

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>

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.

EnguerrandP · Answer 7 · 2014-04-02T22:33:50+0200

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

EnguerrandP · Answer 8 · 2014-04-03T08:59:16+0200

Réponse 8 / 9

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 ?

EnguerrandP · Answer 9 · 2014-04-04T11:51:59+0200

Réponse 9 / 9

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

Votre réponse