[N°de Ligne] Problème avec la creation de la nouvelle 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 à 11:41
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - 22 avril 2014 à 15:19

Bonjour,
J'essaie de remplacer ma fonction "CloneLine" par "NewLine", pour pouvoir crée une nouvelle ligne et lui ajouter sont numéro de ligne.
J'ai un problème avec la fonction "NewLine()".
Et je ne voit pas comment mettre en place la gestion du numéro de la ligne.

fonction "CloneLine" :

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

fonction "NewLine":

function NewLine(idJourNL,idWorkerNL,nameWorkerNL,datesNL)
{
 // New line
 $("#TJour_" + idJourNL+"_"+ idWorkerNL).append('<tr align="center" id="NRow_' + idJourNL+"_"+ idWorkerNL + '"></tr>'); 
 //On crée un Bouton New Line
 var ID_Jour = idJourNL;
 var ID_Worker = idWorkerNL;
 var NAME_Worker = nameWorkerNL;
 var D_A_T_E_S = datesNL;
 $("#Row2_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="button" value="New" style="width: 100%;" id="TNewLine_' + idJourNL+ idWorkerNL + '"  onclick="NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"></input></td>');
 
 //On crée un Input pour la date
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJourNL+"_"+ idWorkerNL + '"></input></td>');
 //On crée un Select pour la tache
 $.ajax
 ({
  type: 'POST',
  data: {id_Jour : idJourNL,id_Worker : idWorkerNL},
  async: false,
  url:'TSRequest.ajx.php', 
  success:function(data) { $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td>'+data+'</td>');},
  error: function(error){alert("Erreur : " + error);}
 });
 //On crée un Input pour le Temps
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJourNL+"_"+ idWorkerNL + '"></input>');
 //On crée une Zone de texte pour la description
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><textarea rows="1" cols="25" style="resize: none;" id="TTADescription_' + idJourNL+"_"+ idWorkerNL + '"></textarea></td>');
 //On crée un Select pour l employer
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="text" style="width: 100%;" id="TSWorker_' + idJourNL+"_"+ idWorkerNL + '"></input>');
 
 // On met le nom de l'employer sélectionner dans l'input TSWorker+idJourNL+idWorkerNL
 $("#TSWorker_"+idJourNL+"_"+ idWorkerNL).val(nameWorkerNL);
  
 // On met la valeur de la date sélectionner dans l'input TDate+idJourNL+idWorkerNL
 var dateText = $.datepick.formatDate(datesNL[0]);
 $("#TDate_"+idJourNL+"_"+ idWorkerNL).val(dateText); 
}

Tout 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 clone du tableau d'origine
    $("#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" 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" id="Row2_' + idJour+"_"+ idWorker + '"></tr>'); 
 //On crée un Bouton New Line
 var ID_Jour = idJour;
 var ID_Worker = idWorker;
 var NAME_Worker = nameWorker;
 var D_A_T_E_S = dates;
 $("#Row2_" + idJour+"_"+ idWorker).append('<td><input type="button" value="New" style="width: 100%;" id="TNewLine_' + idJour+ idWorker + '"  onclick="NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"></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="1" 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); 
}

function NewLine(idJourNL,idWorkerNL,nameWorkerNL,datesNL)
{
 // New line
 $("#TJour_" + idJourNL+"_"+ idWorkerNL).append('<tr align="center" id="NRow_' + idJourNL+"_"+ idWorkerNL + '"></tr>'); 
 //On crée un Bouton New Line
 var ID_Jour = idJourNL;
 var ID_Worker = idWorkerNL;
 var NAME_Worker = nameWorkerNL;
 var D_A_T_E_S = datesNL;
 $("#Row2_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="button" value="New" style="width: 100%;" id="TNewLine_' + idJourNL+ idWorkerNL + '"  onclick="NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"></input></td>');
 
 //On crée un Input pour la date
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJourNL+"_"+ idWorkerNL + '"></input></td>');
 //On crée un Select pour la tache
 $.ajax
 ({
  type: 'POST',
  data: {id_Jour : idJourNL,id_Worker : idWorkerNL},
  async: false,
  url:'TSRequest.ajx.php', 
  success:function(data) { $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td>'+data+'</td>');},
  error: function(error){alert("Erreur : " + error);}
 });
 //On crée un Input pour le Temps
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJourNL+"_"+ idWorkerNL + '"></input>');
 //On crée une Zone de texte pour la description
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><textarea rows="1" cols="25" style="resize: none;" id="TTADescription_' + idJourNL+"_"+ idWorkerNL + '"></textarea></td>');
 //On crée un Select pour l employer
 $("#NRow_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="text" style="width: 100%;" id="TSWorker_' + idJourNL+"_"+ idWorkerNL + '"></input>');
 
 // On met le nom de l'employer sélectionner dans l'input TSWorker+idJourNL+idWorkerNL
 $("#TSWorker_"+idJourNL+"_"+ idWorkerNL).val(nameWorkerNL);
  
 // On met la valeur de la date sélectionner dans l'input TDate+idJourNL+idWorkerNL
 var dateText = $.datepick.formatDate(datesNL[0]);
 $("#TDate_"+idJourNL+"_"+ idWorkerNL).val(dateText); 
}

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>

Firebug me donne se message d'erreur :
"ReferenceError: ID_Jour is not defined

NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"

pourtant :
j'ai l'ai bien définie :

//On crée un Bouton New Line
 var ID_Jour = idJourNL;
 var ID_Worker = idWorkerNL;
 var NAME_Worker = nameWorkerNL;
 var D_A_T_E_S = datesNL;
 $("#Row2_" + idJourNL+"_"+ idWorkerNL).append('<td><input type="button" value="New" style="width: 100%;" id="TNewLine_' + idJourNL+ idWorkerNL + '"  onclick="NewLine(ID_Jour,ID_Worker,NAME_Worker,D_A_T_E_S);"></input></td>');

Le problème il n'y a rien qui se passe quand j'appuis sur mon bouton "new line"

Merci

Merci et que le café soit avec vous.

A voir également:

[N°de Ligne] Problème avec la creation de la nouvelle ligne
Retour a la ligne c# - Forum C# / .NET
Roue de la chance en ligne - Forum Flash
Creation d'une roue - Forum Flash
Regex saut de ligne ✓ - Forum C# / .NET
Regex retour à la ligne ✓ - Forum C# / .NET

2 réponses

Réponse 1 / 2

EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
22 avril 2014 à 14:08

Bonjour,
J'ai trouver se code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-- source: http://stackoverflow.com/questions/11355708/jquery-to-clone-form-single-field-and-increment-id -->

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1"></meta>
	<!-- CSS -->
	<link rel="stylesheet" href="media/css/jquery-ui-1.10.4.custom.css"></link>
	
	<!-- general JavaScript -->
	<script type="text/javascript" src="media/js/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="media/js/jquery-ui-1.10.4.custom.js"></script>	
</head>

<body>
<form method="post">
    <div id="fileds">
		<select name="lang" class='lang'>
		<option>select language</option>
		</select>
    </div>
</form>
<div class="actions">
    <button class="clone">Clone</button> 
    <button class="remove">Remove</button>
</div>
	
<script>
$(function()
{
    $(".clone").on("click", function()
							{
								var cloneIndex = $(".lang").length;
								$(".lang:last").clone()
											   .attr("id", "lang" +  cloneIndex)
											   .appendTo("#fileds")
								
							});
							
     $("button.remove").on("click", function()
									{
										$(".lang:last").remove()
									})  
});
</script>

</body>
</html>

Qui me permet de crée un nouvelle élément avec un id incrémenter.
Comment je peut faire pour intégrer se code a ma page pour qu'il clone "toute ma ligne , change l'id de la ligne cloner et de ces éléments ?"

pour cloner ma ligne j'ai essai en fessant cette modification:

$(function()
{
    $(".clone").on("click", function()
							{
								var cloneIndex = $("#Row2_" + idJour+"_"+ idWorker+"_"+ Num_Line).length;
									$(("#Row2_" + idJour+"_"+ idWorker+"_"+ Num_Line):last).clone()
																						 .attr("id", "#Row2_" + idJour+"_"+ idWorker+"_"+  cloneIndex)
																						 .appendTo("#TJour_" + idJour+"_"+ idWorker)
								
							});
});

mais sa na pas marcher, firebug me met ce message d'erreur:
"SyntaxError: missing ) after argument list

$(("#Row2_" + idJour+"_"+ idWorker+"_"+ Num_Line):last).clone()

"

Réponse 2 / 2

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 à 15:20

Salut ,
J'ai réussit à cloner une ligne et a changer son id.
voila le code :

<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($('.ORow'))
 });  
}

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>

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

Retour à une ligne plus haute en python

Dernière cellule non vide d'une colonne

chronometre en milliseconde

Votre réponse

Discussions similaires