EnguerrandP
Messages postés295Date d'inscriptionvendredi 26 avril 2013StatutMembreDernière intervention15 juillet 2015
-
Modifié par EnguerrandP le 22/04/2014 à 11:41
EnguerrandP
Messages postés295Date d'inscriptionvendredi 26 avril 2013StatutMembreDernière intervention15 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
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:
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>