[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
Regex saut de ligne ✓ - Forum C# / .NET
Saut de ligne c# - Forum C# / .NET
Saut de ligne \n - Forum C / C++ / C++.NET
Saut de ligne /n ✓ - Forum PHP
Remplacer saut de ligne dans textarea ✓ - Forum PHP

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 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
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.

Discussions similaires

Différence entre saut de ligne(LF \n) et retour chariot(CR \r)

Le saut de ligne \n ne marche pas dans les instructions echo

Dernière cellule non vide d'une colonne

chronometre en milliseconde

recherche script PHP gestion de tickets

Votre réponse

Discussions similaires