[N° de Ligne] Gestion des différents éléments de la ligne

Résolu

EnguerrandP

Messages postés: 295
Date d'inscription: vendredi 26 avril 2013
Statut: Membre
Dernière intervention: 15 juillet 2015

- Modifié par EnguerrandP le 22/04/2014 à 15:33
EnguerrandP

Messages postés: 295
Date d'inscription: vendredi 26 avril 2013
Statut: Membre
Dernière intervention: 15 juillet 2015

- 23 avril 2014 à 14:33

Bonjour,
J'ai trouver une fonction me permettant de cloner un élément et de changer son id avec une variable incrémenter.
J'ai quelque soucie à voir comment je peut modifier l'id des éléments contenue dans la ligne une fois celle-ci cloner.(et comment supprimer le bouton cloner des clones).
voici mon script :

<script>
$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
  function(dates)
     {
   // Creation des variables Date
      var dateText = $.datepick.formatDate(dates[0]);
         var dateArr = dateText.split("/");
   var mois=dateArr[1];
   switch(mois) 
   {
   case "Jan":
     var ArrMonth = "01";
   break;
   case "Feb":
     var ArrMonth = "02";
   break;
   case "Mar":
     var ArrMonth = "03";
   break;
   case "Apr":
     var ArrMonth = "04";
   break;
   case "May":
     var ArrMonth = "05";
   break;
   case "Jun":
     var ArrMonth = "06";
   break;
   case "Jul":
     var ArrMonth = "07";
   break;
   case "Aug":
     var ArrMonth = "08";
   break;
   case "Sep":
     var ArrMonth = "09";
   break;
   case "Oct":
     var ArrMonth = "10";
   break;
   case "Nov":
     var ArrMonth = "11";
   break;
   case "Dec":
     var ArrMonth = "12";
   break;
   }
         var IDfromDateText= dateArr[2] +"-"+ ArrMonth  +"-"+ dateArr[0];  
   
   // Creation des variables Worker
   var IDWorker= document.getElementById("TopWorker").value;
   var WorkerArw = IDWorker.split(" ");
   var IDfromWorker = WorkerArw[0] ;
   var NamefromWorker = WorkerArw[1]+" "+ WorkerArw[2];
   
   if ($("#myDiv_TJour_"+IDfromDateText+"_"+IDfromWorker).length > 0)
   {
    // Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText,IDfromWorker,NamefromWorker);
   }
   else
   {
  
    // L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,IDfromWorker,NamefromWorker,dates);

                // ...puis j'affiche le tableau
                AffichDiv(IDfromDateText,IDfromWorker,NamefromWorker);                  
   }           
     }
   });
});

function CreaTable(idJour,idWorker,nameWorker,dates)
{
 //Je crée un nouveau div pour le tableau
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + "_" + idWorker + "'></div>");
 //On crée un tableau pour le jour X 
 $("#myDiv_" +"TJour_" + idJour+"_"+ idWorker).append('<table border="2" id="TJour_' + idJour+"_"+ idWorker + '"></table>').css("border","2px inset #000000");
 
 // Line Title
 $("#TJour_" + idJour+"_"+ idWorker).append('<tr align="center" class="ORow" id="Row1_' + idJour+"_"+ idWorker + '"></tr>'); 
 //Title New Line
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">New Line</td>');
 //On crée un Input pour la date
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">Date</td>');
 //Title Request
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
 //Title Times (h)
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">Time (h)</td>');
 //Title Description
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF">Description</td>');
 //Title Worker
 $("#Row1_" + idJour+"_"+ idWorker).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
 
 // First line
 $("#TJour_" + idJour+"_"+ idWorker).append('<tr align="center" class="Row" id="Row2_' + idJour+"_"+ idWorker+ '"></tr>'); 
 //On crée un Bouton New Line
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="button" value="New" style="width: 100%;" class="clone"; id="TNewLine_' + idJour+"_"+ idWorker + '"></input></td>');
 //On crée un Input pour la date
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour+"_"+ idWorker + '"></input></td>');
 //On crée un Select pour la tache
 $.ajax
 ({
  type: 'POST',
  data: {id_Jour : idJour+"_",id_Worker : idWorker},
  async: false,
  url:'TSRequest.ajx.php', 
  success:function(data) { $("#Row2_" + idJour+"_"+ idWorker).append('<td>'+data+'</td>');},
  error: function(error){alert("Erreur : " + error);}
 });
 //On crée un Input pour le Temps
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJour+"_"+ idWorker+ '"></input>');
 //On crée une Zone de texte pour la description
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour+"_"+ idWorker +'"></textarea></td>');
 //On crée un Select pour l employer
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="text" style="width: 100%;" id="TSWorker_' + idJour+"_"+ idWorker+ '"></input>');
 
 // On met le nom de l'employer sélectionner dans l'input TSWorker+idJour+idWorker
 $("#TSWorker_"+idJour+"_"+ idWorker).val(nameWorker);
  
 // On met la valeur de la date sélectionner dans l'input TDate+idJour+idWorker
 var dateText = $.datepick.formatDate(dates[0]);
 $("#TDate_"+idJour+"_"+ idWorker).val(dateText); 
 
 // Méthode pour le clonage
 var cloneCount = 1;
 var Bclick="#TNewLine_" + idJour+"_"+ idWorker;
 var CRow ="#Row2_" + idJour+"_"+ idWorker;
 var NRow ="Row2_" + idJour+"_"+ idWorker;
 $(Bclick).click(function()
 {
  $(CRow)
    .clone()
    .attr('id', NRow +"_"+ cloneCount++)
    .insertAfter($(CRow))
    
 });  
}

function AffichDiv(idJour,idWorker)
{
    //On masque TOUS les tableaux
  $('div[name="MesTBL"]').hide(); 
 
    // On affiche celui que l'on a selectionné
  $('#myDiv_' + "TJour_" + idJour+"_"+ idWorker).show();   
}

</script>

Merci

Merci et que le café soit avec vous.

A voir également:

[N° de Ligne] Gestion des différents éléments de la ligne
Visual Basic / VB.NET : Calcul des différents éléments d'un triangle - CodeS So - Guide
Trouver réponse qcm en ligne inspecter l'élément ✓ - Forum - Javascript / DHTML
Différence de deux schémas sqlserveur / gestion lot dts - Codes sources - Visual Basic / VB.NET (Base de Donnees)
Gestion de fichier (créer, lire, rajouter des lignes,effacer, détruire) - Codes sources - ASP / ASP.NET (Administration)
Gestion/administration en ligne de compteurs de clics + graphique - Codes sources - PHP (Application)

4 réponses

Réponse 1 / 4

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 22/04/2014 à 16:07

Salut ,
J'ai tester en mettent ceci :

 // Méthode pour le clonage
 var cloneCount = 1;
 var ID_B_NewLine ="#TNewLine_" + idJour+"_"+ idWorker;
 var ID_Row ="#Row2_" + idJour+"_"+ idWorker;
 var N_Row ="Row2_" + idJour+"_"+ idWorker;
 
 var ID_B_NewLine = "#TNewLine_" + idJour+"_"+ idWorker;
 var ID_I_Date = "#TDate_" + idJour+"_"+ idWorker ;
 var ID_S_Request = "#TSRequest_"+ idJour+"_"+ idWorker;
 var ID_I_Time = "#TTime_" + idJour+"_"+ idWorker ;
 var ID_TA_Description = "#TTADescription_" + idJour+"_"+ idWorker ;
 var ID_I_Worker = "#TIWorker_" + idJour+"_"+ idWorker;
 
 var N_B_NewLine = "TNewLine_" + idJour+"_"+ idWorker;
 var N_I_Date = "TDate_" + idJour+"_"+ idWorker ;
 var N_S_Request = "TSRequest_"+ idJour+"_"+ idWorker;
 var N_I_Time = "TTime_" + idJour+"_"+ idWorker ;
 var N_TA_Description = "TTADescription_" + idJour+"_"+ idWorker ;
 var N_I_Worker = "TIWorker_" + idJour+"_"+ idWorker;
 
 $(ID_B_NewLine).click(function()
 {
  $(ID_Row)
    .clone()
    .attr('id', N_Row +"_"+ cloneCount)
    .insertAfter($(ID_Row))
  $(ID_B_NewLine)
    .clone()
    .attr('id', N_B_NewLine +"_"+ cloneCount)  
  $(ID_I_Date)
    .clone()
    .attr('id', N_I_Date +"_"+ cloneCount)
  $(ID_S_Request)
    .clone()
    .attr('id', N_S_Request +"_"+ cloneCount) 
  $(ID_I_Time)
    .clone()
    .attr('id', N_I_Time +"_"+ cloneCount)  
  $(ID_TA_Description)
    .clone()
    .attr('id', N_TA_Description +"_"+ cloneCount)
  $(ID_I_Worker)
    .clone()
    .attr('id', N_I_Worker +"_"+ cloneCount++)   
    
 });

Mais sa ne marche pas, je ne comprend pas pourquoi.

Réponse 2 / 4

@karamel

Messages postés: 1807
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 5 mai 2022

144
Modifié par kazma le 22/04/2014 à 22:20

dans les ligne ou tu ajoute l'id me semble qu'il manque deux guillemet simple

originale

 $("#TJour_" + idJour+"_"+ idWorker).append('<tr align="center" class="ORow" id="Row1_' + idJour+"_"+ idWorker + '"></tr>');

rectifié

 $("#TJour_" + idJour+"_"+ idWorker).append('<tr align="center" class="ORow" id="Row1_'+idJour+'_'+idWorker+'"></tr>');

cours Forest cours !

EnguerrandP

Messages postés: 295
Date d'inscription: vendredi 26 avril 2013
Statut: Membre
Dernière intervention: 15 juillet 2015

1
22 avril 2014 à 22:44

Merci je regarde sa.

EnguerrandP

Messages postés: 295
Date d'inscription: vendredi 26 avril 2013
Statut: Membre
Dernière intervention: 15 juillet 2015

1
23 avril 2014 à 09:14

Bonjour,
J'ai apporter quelque modification,a mon script

Maintenant:
- il clone bien la ligne et change son id.
- il modifie l'id des élément contenue dans la ligne
Mais les nouveaux id sont incorrect je ne comprend pas pourquoi .
Voila les nouveau id's (vu par firebug):

<table id="TJour_2014-04-15_3" border="2">
<tbody>
<tr id="Row1_2014-04-15_3" class="ORow" align="center">
<td bgcolor="#F0FFFF">New Line</td>
<td bgcolor="#F0FFFF">Date</td>
<td width="160px" bgcolor="#F0FFFF">Request</td>
<td bgcolor="#F0FFFF">Time (h)</td>
<td bgcolor="#F0FFFF">Description</td>
<td width="170px" bgcolor="#F0FFFF">Worker</td>
</tr>
<tr id="Row2_2014-04-15_3" class="Row" align="center">
<td>
<input id="TNewLine_2014-04-15_3_1" class="clone" type="button" ;="" style="width: 100%;" value="New">
</td>
<td>
<input id="TDate_2014-04-15_3_1" type="date" style="width: 100%;">
</td>
<td>
<select id="TSRequest_2014-04-15_3_1" style="width: 100%;">
</td>
<td>
<input id="TTime_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
<td>
<textarea id="TTADescription_2014-04-15_3_1" style="resize: none;" cols="25" rows="2"></textarea>
</td>
<td>
<input id="TIWorker_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
</tr>
<tr id="Row2_2014-04-15_3_5" class="Row" align="center">
<td>
<input id="TNewLine_2014-04-15_3_1" class="clone" type="button" ;="" style="width: 100%;" value="New">
</td>
<td>
<input id="TDate_2014-04-15_3_1" type="date" style="width: 100%;">
</td>
<td>
<select id="TSRequest_2014-04-15_3_1" style="width: 100%;">
</td>
<td>
<input id="TTime_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
<td>
<textarea id="TTADescription_2014-04-15_3_1" style="resize: none;" cols="25" rows="2"></textarea>
</td>
<td>
<input id="TIWorker_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
</tr>
<tr id="Row2_2014-04-15_3_4" class="Row" align="center">
<td>
<input id="TNewLine_2014-04-15_3_1" class="clone" type="button" ;="" style="width: 100%;" value="New">
</td>
<td>
<input id="TDate_2014-04-15_3_1" type="date" style="width: 100%;">
</td>
<td>
<select id="TSRequest_2014-04-15_3_1" style="width: 100%;">
</td>
<td>
<input id="TTime_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
<td>
<textarea id="TTADescription_2014-04-15_3_1" style="resize: none;" cols="25" rows="2"></textarea>
</td>
<td>
<input id="TIWorker_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
</tr>
<tr id="Row2_2014-04-15_3_3" class="Row" align="center">
<td>
<input id="TNewLine_2014-04-15_3_1" class="clone" type="button" ;="" style="width: 100%;" value="New">
</td>
<td>
<input id="TDate_2014-04-15_3_1" type="date" style="width: 100%;">
</td>
<td>
<select id="TSRequest_2014-04-15_3_1" style="width: 100%;">
</td>
<td>
<input id="TTime_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
<td>
<textarea id="TTADescription_2014-04-15_3_1" style="resize: none;" cols="25" rows="2"></textarea>
</td>
<td>
<input id="TIWorker_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
</tr>
<tr id="Row2_2014-04-15_3_2" class="Row" align="center">
<td>
<input id="TNewLine_2014-04-15_3_1" class="clone" type="button" ;="" style="width: 100%;" value="New">
</td>
<td>
<input id="TDate_2014-04-15_3_1" type="date" style="width: 100%;">
</td>
<td>
<select id="TSRequest_2014-04-15_3_1" style="width: 100%;">
</td>
<td>
<input id="TTime_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
<td>
<textarea id="TTADescription_2014-04-15_3_1" style="resize: none;" cols="25" rows="2"></textarea>
</td>
<td>
<input id="TIWorker_2014-04-15_3_1" type="text" style="width: 100%;">
</td>
</tr>
<tr id="Row2_2014-04-15_3_1" class="Row" align="center">
<td>
<input id="TNewLine_2014-04-15_3_2" class="clone" type="button" ;="" style="width: 100%;" value="New">
</td>
<td>
<input id="TDate_2014-04-15_3_2" type="date" style="width: 100%;">
</td>
<td>
<select id="TSRequest_2014-04-15_3_2" style="width: 100%;">
</td>
<td>
<input id="TTime_2014-04-15_3_2" type="text" style="width: 100%;">
</td>
<td>
<textarea id="TTADescription_2014-04-15_3_2" style="resize: none;" cols="25" rows="2"></textarea>
</td>
<td>
<input id="TIWorker_2014-04-15_3_2" type="text" style="width: 100%;">
</td>
</tr>
</tbody>
</table>

Voila mon script

function CreaTable(idJour,idWorker,nameWorker,dates)
{
	//Je crée un nouveau div pour le tableau
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + '_' + idWorker + "'></div>");
	//On crée un tableau pour le jour X 
	$("#myDiv_" +"TJour_" + idJour+'_'+ idWorker).append('<table border="2" id="TJour_' + idJour+'_'+ idWorker + '"></table>').css("border","2px inset #000000");
	
	// Line Title
	$("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" class="ORow" id="Row1_' + idJour+'_'+ idWorker + '"></tr>'); 
	//Title New Line
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">New Line</td>');
	//On crée un Input pour la date
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Date</td>');
	//Title Request
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
	//Title Times (h)
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Time (h)</td>');
	//Title Description
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Description</td>');
	//Title Worker
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
 
	// First line
	$("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" class="Row" id="Row2_' + idJour+'_'+ idWorker+ '"></tr>'); 
	//On crée un Bouton New Line
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="button" value="New" style="width: 100%;" class="clone"; id="TNewLine_' + idJour+'_'+ idWorker + '"></input></td>');
	//On crée un Input pour la date
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour+'_'+ idWorker + '"></input></td>');
	//On crée un Select pour la tache
	$.ajax
	({
		type: 'POST',
		data: {id_Jour : idJour+'_',id_Worker : idWorker},
		async: false,
		url:'TSRequest.ajx.php', 
		success:function(data) { $("#Row2_" + idJour+'_'+ idWorker).append('<td>'+data+'</td>');},
		error: function(error){alert("Erreur : " + error);}
	});
	//On crée un Input pour le Temps
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJour+'_'+ idWorker+ '"></input>');
	//On crée une Zone de texte pour la description
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour+'_'+ idWorker +'"></textarea></td>');
	//On crée un Select pour l employer
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" style="width: 100%;" id="TIWorker_' + idJour+'_'+ idWorker+ '"></input>');
 
	// On met le nom de l'employer sélectionner dans l'input TSWorker+idJour+idWorker
	$("#TSWorker_"+idJour+'_'+ idWorker).val(nameWorker);
  
	// On met la valeur de la date sélectionner dans l'input TDate+idJour+idWorker
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idJour+'_'+ idWorker).val(dateText); 
	
	// Méthode pour le clonage
	var cloneCount = 1;
	var ID_B_NewLine ="#TNewLine_" + idJour+'_'+ idWorker;
	var ID_Row ="#Row2_" + idJour+'_'+ idWorker;
	var N_Row ="Row2_" + idJour+'_'+ idWorker;
	
	var ID_B_NewLine = "#TNewLine_" + idJour+'_'+ idWorker;
	var ID_I_Date = "#TDate_" + idJour+'_'+ idWorker ;
	var ID_S_Request = "#TSRequest_"+ idJour+'_'+ idWorker;
	var ID_I_Time = "#TTime_" + idJour+'_'+ idWorker ;
	var ID_TA_Description = "#TTADescription_" + idJour+'_'+ idWorker ;
	var ID_I_Worker = "#TIWorker_" + idJour+'_'+ idWorker;
	
	var N_B_NewLine = "TNewLine_" + idJour+'_'+ idWorker;
	var N_I_Date = "TDate_" + idJour+'_'+ idWorker ;
	var N_S_Request = "TSRequest_"+ idJour+'_'+ idWorker;
	var N_I_Time = "TTime_" + idJour+'_'+ idWorker ;
	var N_TA_Description = "TTADescription_" + idJour+'_'+ idWorker ;
	var N_I_Worker = "TIWorker_" + idJour+'_'+ idWorker;
	
	$(ID_B_NewLine).click(function()
	{
		$(ID_Row)
				.clone()
				.attr('id', N_Row +'_'+ cloneCount)
				.insertAfter($(ID_Row))
		$(ID_B_NewLine)
			
				.attr('id', N_B_NewLine +'_'+ cloneCount)		
		$(ID_I_Date)
				
				.attr('id', N_I_Date +'_'+ cloneCount)
		$(ID_S_Request)
				
				.attr('id', N_S_Request +'_'+ cloneCount)	
		$(ID_I_Time)
				
				.attr('id', N_I_Time +'_'+ cloneCount)		
		$(ID_TA_Description)
				
				.attr('id', N_TA_Description +'_'+ cloneCount)
		$(ID_I_Worker)
				
				.attr('id', N_I_Worker +'_'+ cloneCount++)			
	});  
}

EnguerrandP

Messages postés: 295
Date d'inscription: vendredi 26 avril 2013
Statut: Membre
Dernière intervention: 15 juillet 2015

1
23 avril 2014 à 11:27

J'ai apporter quelque correction et modification pour qu'il est (théoriquement) le fonctionnement shoutaiter:

function CreaTable(idJour,idWorker,nameWorker,dates)
{
	//Je crée un nouveau div pour le tableau
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + '_' + idWorker + "'></div>");
	//On crée un tableau pour le jour X 
	$("#myDiv_" +"TJour_" + idJour+'_'+ idWorker).append('<table border="2" id="TJour_' + idJour+'_'+ idWorker + '"></table>').css("border","2px inset #000000");
	
	// Line Title
	$("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" class="ORow" id="Row1_' + idJour+'_'+ idWorker + '"></tr>'); 
	//Title New Line
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">New Line</td>');
	//On crée un Input pour la date
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Date</td>');
	//Title Request
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
	//Title Times (h)
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Time (h)</td>');
	//Title Description
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Description</td>');
	//Title Worker
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
 
	// First line
	$("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" class="Row" id="Row2_' + idJour+'_'+ idWorker+ '"></tr>'); 
	//On crée un Bouton New Line
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="button" value="New" style="width:100%" class="clone" id="TNewLine_' + idJour+'_'+ idWorker + '"></input></td>');
	//On crée un Input pour la date
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour+'_'+ idWorker + '"></input></td>');
	//On crée un Select pour la tache
	$.ajax
	({
		type: 'POST',
		data: {id_Jour : idJour+'_',id_Worker : idWorker},
		async: false,
		url:'TSRequest.ajx.php', 
		success:function(data) { $("#Row2_" + idJour+'_'+ idWorker).append('<td>'+data+'</td>');},
		error: function(error){alert("Erreur : " + error);}
	});
	//On crée un Input pour le Temps
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" value="" style="width: 100%;" id="TTime_' + idJour+'_'+ idWorker+ '"></input>');
	//On crée une Zone de texte pour la description
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour+'_'+ idWorker +'"></textarea></td>');
	//On crée un Input pour l employer
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" style="width: 100%;" id="TIWorker_' + idJour+'_'+ idWorker+ '"></input>');
 
	// On met le nom de l'employer sélectionner dans l'input TSWorker+idJour+idWorker
	$("#TIWorker_"+idJour+'_'+ idWorker).val(nameWorker);
  
	// On met la valeur de la date sélectionner dans l'input TDate+idJour+idWorker
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idJour+'_'+ idWorker).val(dateText); 
	
  	// Méthode pour le clonage
	var cloneCount = 1;
	var ID_B_NewLine ="#TNewLine_" + idJour+'_'+ idWorker;
	var ID_Row ="#Row2_" + idJour+'_'+ idWorker;
	var N_Row ="Row2_" + idJour+'_'+ idWorker;
	
	var ID_B_NewLine = "#TNewLine_" + idJour+'_'+ idWorker;
	var ID_I_Date = "#TDate_" + idJour+'_'+ idWorker ;
	var ID_S_Request = "#TSRequest_"+ idJour+'_'+ idWorker;
	var ID_I_Time = "#TTime_" + idJour+'_'+ idWorker ;
	var ID_TA_Description = "#TTADescription_" + idJour+'_'+ idWorker ;
	var ID_I_Worker = "#TIWorker_" + idJour+'_'+ idWorker;
	
	var N_B_NewLine = "TNewLine_" + idJour+'_'+ idWorker;
	var N_I_Date = "TDate_" + idJour+'_'+ idWorker ;
	var N_S_Request = "TSRequest_"+ idJour+'_'+ idWorker;
	var N_I_Time = "TTime_" + idJour+'_'+ idWorker ;
	var N_TA_Description = "TTADescription_" + idJour+'_'+ idWorker ;
	var N_I_Worker = "TIWorker_" + idJour+'_'+ idWorker;
	
	var S_Request = $(ID_S_Request).value
	var N_Description = $(ID_TA_Description).value
	var E_Time = $(ID_I_Time).value
	
	$(ID_B_NewLine).click(function()
	{
		// Clone line
		$(ID_Row)
				.clone()
				.attr('id', N_Row +'_'+ cloneCount++)
				.insertAfter($(ID_Row));	
		// Modify object id
		$(ID_B_NewLine).attr('id', N_B_NewLine +'_'+ cloneCount);					
		$(ID_I_Date).attr('id', N_I_Date +'_'+ cloneCount);				
		$(ID_S_Request).attr('id', N_S_Request +'_'+ cloneCount);			
		$(ID_I_Time).attr('id', N_I_Time +'_'+ cloneCount);			
		$(ID_TA_Description).attr('id', N_TA_Description +'_'+ cloneCount);				
		$(ID_I_Worker).attr('id', N_I_Worker +'_'+ cloneCount);	
		
		// Modify object Attibute
		$(ID_I_Time).attr('value','');
		$(ID_S_Request).attr('value','');
		$(ID_TA_Description).attr('value','');
		
		// Modify clone Attibute
		$(ID_B_NewLine +'_'+ cloneCount).attr("style", "visibility: hidden");
		$(ID_I_Time +'_'+ cloneCount).attr('value',E_Time);
		$(ID_S_Request +'_'+ cloneCount).attr('value',S_Request);
		$(ID_TA_Description +'_'+ cloneCount).attr('value',N_Description);
		
	});
}

Je n'arrive toujours pas a avoir l'id correct pour les élément de la ligne.
Et je n'arrive pas a appliquer les modification des attribue sur mes éléments.

Réponse 3 / 4

EnguerrandP

Messages postés: 295
Date d'inscription: vendredi 26 avril 2013
Statut: Membre
Dernière intervention: 15 juillet 2015

1
23 avril 2014 à 11:44

Bonjour,
Je pense que je me suis tromper dans mon idée.
Car une fois cette fonction fini je ne vois pas comment je pourrait faire pour la suite avec :
-l'initialisation du tableau
et
-la mise a jour du tableau entre les switch de jour.

Se que je veut dire c'est il y a le problème de la création des lignes du tableau pour chaque ligne Jour/Wokeur de la base de données lors de l'initialisation du tableau.

Et aussi lorsque l'on passe d'un jour à un autre il faut regarder dans la base de données si il y a des informations qui manque au tableau pour le Jour/Workeur sélectionner.

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 23/04/2014 à 12:14

Es ce qu'il y aurait une solution plus simple qui me permétterait de modifier cette fonction :

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

Pour modifier mon id qu'il passe de : Nom_Elm+_+Jour+_+Workeur
a : Nom_Elm+_+Jour+_+Workeur+_+N°Ligne

???

Par exemple avec quelque chose dans se genre :

function CreaTable(idJour,idWorker,nameWorker,dates)
{
	//Je crée un nouveau div pour le tableau
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + '_' + idWorker + "'></div>");
	//On crée un tableau pour le jour X 
	$("#myDiv_" +"TJour_" + idJour+'_'+ idWorker).append('<table border="2" id="TJour_' + idJour+'_'+ idWorker + '"></table>').css("border","2px inset #000000");
	
	// Line Title
	$("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" class="ORow" id="Row1_' + idJour+'_'+ idWorker + '"></tr>'); 
	//Title New Line
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">New Line</td>');
	//On crée un Input pour la date
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Date</td>');
	//Title Request
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
	//Title Times (h)
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Time (h)</td>');
	//Title Description
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Description</td>');
	//Title Worker
	$("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
 
	// First line
	$("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" class="Row" id="Row2_' + idJour+'_'+ idWorker+ '"></tr>'); 
	//On crée un Bouton New Line
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="button" value="New" style="width:100%" onclick="CloneLine(this.parentNode.parentNode,'idJour','idWorker');" id="TNewLine_' + idJour+'_'+ idWorker + '"></input></td>');
	//On crée un Input pour la date
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour+'_'+ idWorker + '"></input></td>');
	//On crée un Select pour la tache
	$.ajax
	({
		type: 'POST',
		data: {id_Jour : idJour+'_',id_Worker : idWorker},
		async: false,
		url:'TSRequest.ajx.php', 
		success:function(data) { $("#Row2_" + idJour+'_'+ idWorker).append('<td>'+data+'</td>');},
		error: function(error){alert("Erreur : " + error);}
	});
	//On crée un Input pour le Temps
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" value="" style="width: 100%;" id="TTime_' + idJour+'_'+ idWorker+ '"></input>');
	//On crée une Zone de texte pour la description
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour+'_'+ idWorker +'"></textarea></td>');
	//On crée un Input pour l employer
	$("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" style="width: 100%;" id="TIWorker_' + idJour+'_'+ idWorker+ '"></input>');
 
	// On met le nom de l'employer sélectionner dans l'input TSWorker+idJour+idWorker
	$("#TIWorker_"+idJour+'_'+ idWorker).val(nameWorker);
  
	// On met la valeur de la date sélectionner dans l'input TDate+idJour+idWorker
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idJour+'_'+ idWorker).val(dateText); 
}

function CloneLine(Line,idJour,idWorker)
{
	newLine = Line.cloneNode(true); 
	Line.parentNode.insertBefore(newLine,Line);
	 
	// Méthode pour le clonage
	var cloneCount = 1;
	var ID_Row ="#Row2_" + idJour+'_'+ idWorker;
	var N_Row ="Row2_" + idJour+'_'+ idWorker;
	
	var ID_B_NewLine = "#TNewLine_" + idJour+'_'+ idWorker;
	var ID_I_Date = "#TDate_" + idJour+'_'+ idWorker ;
	var ID_S_Request = "#TSRequest_"+ idJour+'_'+ idWorker;
	var ID_I_Time = "#TTime_" + idJour+'_'+ idWorker ;
	var ID_TA_Description = "#TTADescription_" + idJour+'_'+ idWorker ;
	var ID_I_Worker = "#TIWorker_" + idJour+'_'+ idWorker;
	
	var N_B_NewLine = "TNewLine_" + idJour+'_'+ idWorker;
	var N_I_Date = "TDate_" + idJour+'_'+ idWorker ;
	var N_S_Request = "TSRequest_"+ idJour+'_'+ idWorker;
	var N_I_Time = "TTime_" + idJour+'_'+ idWorker ;
	var N_TA_Description = "TTADescription_" + idJour+'_'+ idWorker ;
	var N_I_Worker = "TIWorker_" + idJour+'_'+ idWorker;

	// Modify object id
	$(ID_B_NewLine).attr('id', N_B_NewLine +'_'+ cloneCount);					
	$(ID_I_Date).attr('id', N_I_Date +'_'+ cloneCount);				
	$(ID_S_Request).attr('id', N_S_Request +'_'+ cloneCount);			
	$(ID_I_Time).attr('id', N_I_Time +'_'+ cloneCount);			
	$(ID_TA_Description).attr('id', N_TA_Description +'_'+ cloneCount);				
	$(ID_I_Worker).attr('id', N_I_Worker +'_'+ cloneCount);			
}

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 23/04/2014 à 13:15

Salut,
j'ai réussit a faire avancer le problème :

function CreaTable(idJour,idWorker,nameWorker,dates)
{
 //Je crée un nouveau div pour le tableau
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + '_' + idWorker + "'></div>");
 //On crée un tableau pour le jour X 
 $("#myDiv_" +"TJour_" + idJour+'_'+ idWorker).append('<table border="2" id="TJour_' + idJour+'_'+ idWorker + '"></table>').css("border","2px inset #000000");
 
 // Line Title
 $("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" class="ORow" id="Row1_' + idJour+'_'+ idWorker + '"></tr>'); 
 //Title New Line
 $("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">New Line</td>');
 //On crée un Input pour la date
 $("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Date</td>');
 //Title Request
 $("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
 //Title Times (h)
 $("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Time (h)</td>');
 //Title Description
 $("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF">Description</td>');
 //Title Worker
 $("#Row1_" + idJour+'_'+ idWorker).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
 
 // First line
 $("#TJour_" + idJour+'_'+ idWorker).append('<tr align="center" class="Row" id="Row2_' + idJour+'_'+ idWorker+ '"></tr>'); 
 //On crée un Bouton New Line
 $("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="button" value="New" style="width:100%" class="clone" id="TNewLine_' + idJour+'_'+ idWorker + '"></input></td>');
 //On crée un Input pour la date
 $("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour+'_'+ idWorker + '"></input></td>');
 //On crée un Select pour la tache
 $.ajax
 ({
  type: 'POST',
  data: {id_Jour : idJour+'_',id_Worker : idWorker},
  async: false,
  url:'TSRequest.ajx.php', 
  success:function(data) { $("#Row2_" + idJour+'_'+ idWorker).append('<td>'+data+'</td>');},
  error: function(error){alert("Erreur : " + error);}
 });
 //On crée un Input pour le Temps
 $("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" value="" style="width: 100%;" id="TTime_' + idJour+'_'+ idWorker+ '"></input>');
 //On crée une Zone de texte pour la description
 $("#Row2_" + idJour+'_'+ idWorker).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour+'_'+ idWorker +'"></textarea></td>');
 //On crée un Input pour l employer
 $("#Row2_" + idJour+'_'+ idWorker).append('<td><input type="text" style="width: 100%;" id="TIWorker_' + idJour+'_'+ idWorker+ '"></input>');
 
 // On met le nom de l'employer sélectionner dans l'input TSWorker+idJour+idWorker
 $("#TIWorker_"+idJour+'_'+ idWorker).val(nameWorker);
  
 // On met la valeur de la date sélectionner dans l'input TDate+idJour+idWorker
 var dateText = $.datepick.formatDate(dates[0]);
 $("#TDate_"+idJour+'_'+ idWorker).val(dateText); 
 
   // Méthode pour le clonage
 var cloneCount = 1;
 var Line ="#Row2_" + idJour+'_'+ idWorker;
 var N_Row ="Row2_" + idJour+'_'+ idWorker;
 
 var ID_B_NewLine = "#TNewLine_" + idJour+'_'+ idWorker;
 var ID_I_Date = "#TDate_" + idJour+'_'+ idWorker ;
 var ID_S_Request = "#TSRequest_"+ idJour+'_'+ idWorker;
 var ID_I_Time = "#TTime_" + idJour+'_'+ idWorker ;
 var ID_TA_Description = "#TTADescription_" + idJour+'_'+ idWorker ;
 var ID_I_Worker = "#TIWorker_" + idJour+'_'+ idWorker;
 
 var N_B_NewLine = "TNewLine_" + idJour+'_'+ idWorker;
 var N_I_Date = "TDate_" + idJour+'_'+ idWorker ;
 var N_S_Request = "TSRequest_"+ idJour+'_'+ idWorker;
 var N_I_Time = "TTime_" + idJour+'_'+ idWorker ;
 var N_TA_Description = "TTADescription_" + idJour+'_'+ idWorker ;
 var N_I_Worker = "TIWorker_" + idJour+'_'+ idWorker;
 
 var S_Request = $(ID_S_Request).text
 var N_Description = $(ID_TA_Description).text
 var E_Time = $(ID_I_Time).text
 
 $('.clone').click(function()
 {
  // Clone line
  newLine = $(Line).clone(true); 
  newLine.insertAfter('.ORow'); 
  
  // Modify object id
  $(newLine).attr('id', N_Row +'_'+ cloneCount);
  $(ID_B_NewLine).attr('id', N_B_NewLine +'_'+ cloneCount);     
  $(ID_I_Date).attr('id', N_I_Date +'_'+ cloneCount);    
  $(ID_S_Request).attr('id', N_S_Request +'_'+ cloneCount);   
  $(ID_I_Time).attr('id', N_I_Time +'_'+ cloneCount);   
  $(ID_TA_Description).attr('id', N_TA_Description +'_'+ cloneCount);    
  $(ID_I_Worker).attr('id', N_I_Worker +'_'+ cloneCount++); 
  
  // Modify object Attibute
  $(ID_I_Time).text("");
  $(ID_S_Request).text("");
  $(ID_TA_Description).text("");
  
  // Modify clone Attibute
  $(ID_B_NewLine).attr("style", "visibility: hidden");
  $(ID_I_Time +'_'+ cloneCount).text(E_Time);
  $(ID_S_Request +'_'+ cloneCount).text(S_Request);
  $(ID_TA_Description +'_'+ cloneCount).text(N_Description);
  
 });
}

Il fonctionne correctement pour le 1er tableau mais pas pour les suivants.
Et reste le soucis des mise a jour tableau avec la base de données

EnguerrandP

Messages postés: 295
Date d'inscription: vendredi 26 avril 2013
Statut: Membre
Dernière intervention: 15 juillet 2015

1
23 avril 2014 à 14:09

Voila j'ai corriger la plupart des défaut reset encor a vider l'input time(h) pour la ligne éditable et voir comment je peut faire pour adapter sa avec ma base de données.

  	// Méthode pour le clonage
	var lineCount = 1;
	var Line ="#Row2_" + idJour+'_'+ idWorker;
	var N_Line ="Row2_" + idJour+'_'+ idWorker;
	
	var ID_B_TNewLine = "#TNewLine_" + idJour+'_'+ idWorker;
	var ID_I_Date = "#TDate_" + idJour+'_'+ idWorker ;
	var ID_S_Request = "#TSRequest_"+ idJour+'_'+ idWorker;
	var ID_I_Time = "#TTime_" + idJour+'_'+ idWorker ;
	var ID_TA_Description = "#TTADescription_" + idJour+'_'+ idWorker ;
	var ID_I_Worker = "#TIWorker_" + idJour+'_'+ idWorker;
	
	var N_B_TNewLine = "TNewLine_" + idJour+'_'+ idWorker;
	var N_I_Date = "TDate_" + idJour+'_'+ idWorker ;
	var N_S_Request = "TSRequest_"+ idJour+'_'+ idWorker;
	var N_I_Time = "TTime_" + idJour+'_'+ idWorker ;
	var N_TA_Description = "TTADescription_" + idJour+'_'+ idWorker ;
	var N_I_Worker = "TIWorker_" + idJour+'_'+ idWorker;
	
	$('.clone').click(function()
	{
	
		// Clone line
		newLine = $(Line).clone(true);
		$(newLine).attr('id', N_Line +'_'+ lineCount);		
		newLine.insertAfter("#Row1_" + idJour+'_'+ idWorker);	
		
		// Modify object id
		$('.clone').attr("style", "visibility: hidden");
		$(ID_B_TNewLine).attr('id', N_B_TNewLine +'_'+ lineCount).attr("style", "visibility: visible");					
		$(ID_I_Date).attr('id', N_I_Date +'_'+ lineCount);				
		$(ID_S_Request).attr('id', N_S_Request +'_'+ lineCount);			
		$(ID_I_Time).attr('id', N_I_Time +'_'+ lineCount);			
		$(ID_TA_Description).attr('id', N_TA_Description +'_'+ lineCount);				
		$(ID_I_Worker).attr('id', N_I_Worker +'_'+ lineCount++);	
	});
}

Réponse 4 / 4

EnguerrandP

Messages postés: 295
Date d'inscription: vendredi 26 avril 2013
Statut: Membre
Dernière intervention: 15 juillet 2015

1
23 avril 2014 à 14:33

Bonjour,
J'ai trouver ou il fallait que je place le code pour forcer la valeur de mon input cloner se qui résout le dernier probléme de se post.

	$('.clone').click(function()
	{
	
		// Clone line
		newLine = $(Line).clone(true);
		$(newLine).attr('id', N_Line +'_'+ lineCount);		
		newLine.insertAfter("#Row1_" + idJour+'_'+ idWorker);	
		
		// Modify object id
		$('.clone').attr("style", "visibility: hidden");
		$(ID_B_TNewLine).attr('id', N_B_TNewLine +'_'+ lineCount).attr("style", "visibility: visible");					
		$(ID_I_Date).attr('id', N_I_Date +'_'+ lineCount);				
		$(ID_S_Request).attr('id', N_S_Request +'_'+ lineCount);			
		$(ID_I_Time).attr('id', N_I_Time +'_'+ lineCount).val('');			
		$(ID_TA_Description).attr('id', N_TA_Description +'_'+ lineCount);				
		$(ID_I_Worker).attr('id', N_I_Worker +'_'+ lineCount++);	
	});

Merci, je vais continuer a réfléchir pour mon problème avec la base de données.

Votre réponse