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
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):
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.
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.
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++);
});
}