Sujet Précédent Sujet Suivant

[JQuery] Creation d'un tableau avec des éléments

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 8/04/2014 à 09:50
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 - 8 avril 2014 à 14:09
Bonjour,
On ma conseiller à la place de cloné un tableau pour faire une gestion par tableau des fiches journalière du temps de travaille, de crée un tableau avec JQuery. Dans se tableau, composer de six ligne on y retrouve différent type d'élément:
- Button
-Input
-Textarea
-Select

Tous ces élément peuvent récupérer des information d'une base de donnée.

Le principe de cette interface, est en premier lieu de choisir un Worker puis lorsque l'on appuis sur un calendrier Datepicker, le programme regarde :
-Si le tableau du jour existe si oui il l'affiche puis va voir si la base de donnée a des information pour cette journée en fonction du Worker précédemment sélectionner et affiche si il en a.
-Sinon il crée le tableau, puis va voir si la base de donnée a des information pour cette journée en fonction du Worker précédemment sélectionner et affiche si il en a.

(Je donne toute c'est information a pur but indicatif pour que la solution que l'on trouvera soit la plus juste possible)

Voila mon code pour cette interface : 
<html>

<head>
 <meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
 <link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
 <link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
 <link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
 <script type="text/javascript" src="JS/JS_JQuery_1_11_0_C.js"></script>
 <script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
 <script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script> 
 <script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>

<body background="IMAGES/fond_Gris.jpg">

<div id="Top_Worker">
 WORKER :
 <SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
  <option value="*****************" selected="selected"></option>
  <option>*****************
 </SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
   <img src="IMAGES/return_menu.jpg">
</button>

<div id="inlineDatepicker"></div>
 <input type="date" id="DATE1" Value='date' Size="9"></input>
 
<fieldset id="Partie_Basse_Fieldset">
 <legend> DAILY TIMETABLE per request</legend>
 <div name="MesLignes" id="Zone_Tab"></div> 
</fieldset> 

<script>

$(function() 
{
   $('#inlineDatepicker').datepick
   ({onSelect:
  function(dates)
     {
      var dateText = $.datepick.formatDate(dates[0]);
      document.getElementById("DATE1").value =dateText;
         var dateArr = dateText.split("/");
         var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];  
   
   if ($("#myDiv_TJour_"+IDfromDateText).length > 0)
   {
    // Il existe..donc j'affiche le tableau
                AffichDiv(IDfromDateText);
   }
   else
   {
    // L'element n'existe pas.. je le crée ( clone)..
                CreaTable(IDfromDateText,dates);

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

function CreaTable(idTable,dates)
{
 //Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idTable + "'></div>");
 //On crée un tableau pour le jour X 
 $("myDiv_" +"TJour_" + idTable).append('<table id="TJour_' + idTable + '"></table>');
 //On crée un Bouton New Line
 $("TJour_" + idTable).append('<input type="button" id="TNewLine_' + idTable + '"></input>');
 //On crée un Input pour la date
 $("TJour_" + idTable).append('<input type="date" size="9" id="TDate_' + idTable + '"></input>');
 //On crée un Select pour la tache
 $("TJour_" + idTable).append('<select onChange="saveValue(this)" id="TSRequest_' + idTable + '"></select>');
 //On crée un Input pour le Temps
 $("TJour_" + idTable).append('<input type="text" size="5" id="TTime_' + idTable + '"></input>');
 //On crée une Zone de texte pour la description
 $("TJour_" + idTable).append('<textarea rows="2" cols="30" id="TTADescription_' + idTable + '"></textarea>');
 //On crée un Select pour le travailleur 
 $("TJour_" + idTable).append('<select onChange="saveValue(this)" id="TSWorker_' + idTable + '"></select>');

  
 var dateText = $.datepick.formatDate(dates[0]);
 $("#TDate_"+idTable).val(dateText); 
}

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

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

</script>
</body>
</html>


Ma question :
Pourquoi mon interface n'affiche que la partie haute de celle-ci, et que dans la partie basse (le Fieldset) les éléments crée ne s'affiche pas?

Merci

Merci et que le café soit avec vous.

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 8/04/2014 à 10:29
Je croit que cette nouvelle version est plus juste : 
<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_JQuery_1_11_0_C.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>

<body background="IMAGES/fond_Gris.jpg">

<div id="Top_Worker">
	WORKER :
	<SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
		<option value="*****************" selected="selected"></option>
		<option>*****************
	</SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
			<img src="IMAGES/return_menu.jpg">
</button>

<div id="inlineDatepick"></div>
 <input type="date" id="DATE1" Value='date' Size="9"></input>
 
<fieldset id="Partie_Basse_Fieldset">
	<legend> DAILY TIMETABLE per request</legend>
	<div name="MesLignes" id="Zone_Tab"></div>	
</fieldset> 

<script>

$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
		function(dates)
   		{
    		var dateText = $.datepick.formatDate(dates[0]);
   			document.getElementById("DATE1").value =dateText;
       		var dateArr = dateText.split("/");
        	var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];	 
		 
			if ($("#myDiv_TJour_"+IDfromDateText).length > 0)
			{
				// Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText);
			}
			else
			{
				// L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,dates);

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

function CreaTable(idTable,dates)
{
	//Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idTable + "'></div>");
	//On crée un tableau pour le jour X 
	$("#myDiv_" +"TJour_" + idTable).append('<table id="TJour_' + idTable + '"></table>');
	// On crée le corp du tableau
	var tabBody = $('<tbody></tbody>'); 
	// On crée une ligne du tableau
	var row = $('<tr></tr>');  
	//On crée un Bouton New Line
	var tdTNewLine = $('<td><input type="button" onclick="CloneLine(this.parentNode.parentNode);" id="TNewLine_' + idTable + '"></input></td>');
	//On crée un Input pour la date
	var tdTDate = $('<td><input type="date" size="9" id="TDate_' + idTable + '"></input></td>');
	//On crée un Select pour la tache
	var tdTSRequest = $('<td><select onChange="saveValue(this)" id="TSRequest_' + idTable + '"></select></td>');
	//On crée un Input pour le Temps
	var tdTTime = $('<td><input type="text" size="5" id="TTime_' + idTable + '"></input></td>');
	//On crée une Zone de texte pour la description
	var tdTTADescription = $('<td><textarea rows="2" cols="30" id="TTADescription_' + idTable + '"></textarea></td>');
	//On crée un Select pour le travailleur
	var tdTSWorker = $('<td><select onChange="saveValue(this)" id="TSWorker_' + idTable + '"></select></td>');
	
	row.append(tdTNewLine);   
	row.append(tdTDate);
	row.append(tdTSRequest);
	row.append(tdTTime);
	row.append(tdTTADescription);
	row.append(tdTSWorker);
	tabBody.append(row);
	$("TJour_" + idTable).append(tabBody);
		
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idTable).val(dateText);	
}

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

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

</script>
</body>
</html>
0
Réponse 2 / 4
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
8 avril 2014 à 11:34
Bonjour en passant par se site : http://jsfiddle.net/bgPfx/30/
le code 
<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_JQuery_1_11_0_C.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>

<body background="IMAGES/fond_Gris.jpg">

<div id="Top_Worker">
	WORKER :
	<SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
		<option value="*****************" selected="selected"></option>
		<option>*****************
	</SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
			<img src="IMAGES/return_menu.jpg">
</button>

<div id="inlineDatepick"></div>
 <input type="date" id="DATE1" Value='date' Size="9"></input>
 
<fieldset id="Partie_Basse_Fieldset">
	<legend> DAILY TIMETABLE per request</legend>
	<div id="Zone_Tab">
	</div>	
</fieldset> 

<script>

$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
		function(dates)
   		{
    		var dateText = $.datepick.formatDate(dates[0]);
   			document.getElementById("DATE1").value =dateText;
       		var dateArr = dateText.split("/");
        	var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];	 
		 
			if ($("#myDiv_TJour_"+IDfromDateText).length > 0)
			{
				// Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText);
			}
			else
			{
				// L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,dates);

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

function CreaTable(idJour,dates)
{
	//Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + "'></div>");
	//On crée un tableau pour le jour X 
	$("#myDiv_" +"TJour_" + idJour).append('<table id="TJour_' + idJour + '"></table>');
	//On crée un Bouton New Line
	$("#TJour_" + idJour).append('<input type="button" onclick="CloneLine(this.parentNode.parentNode);" id="TNewLine_' + idJour + '"></input>');
	//On crée un Input pour la date
	$("#TJour_" + idJour).append('<input type="date" size="9" id="TDate_' + idJour + '"></input>');
	//On crée un Select pour la tache
	$("#TJour_" + idJour).append('<select onChange="saveValue(this)" id="TSRequest_' + idJour + '"></select>');
	//On crée un Input pour le Temps
	$("#TJour_" + idJour).append('<input type="text" size="5" id="TTime_' + idJour + '"></input>');
	//On crée une Zone de texte pour la description
	$("#TJour_" + idJour).append('<textarea rows="2" cols="30" id="TTADescription_' + idJour + '"></textarea>');
	//On crée un Select pour le travailleur 
	$("#TJour_" + idJour).append('<select onChange="saveValue(this)" id="TSWorker_' + idJour + '"></select>');

	// On met la valeur de la date sélectionner dans l'input TDate+idJour
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idJour).val(dateText);	
}

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

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

</script>
</body>
</html>

(il faut remplacer datepick par date picker.)

Fait bien apparaitre de nouveau élément lors du premièreappuis sur le calendrier.

mais se code : 
<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_JQuery_1_11_0_C.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>

<body background="IMAGES/fond_Gris.jpg">

<div id="Top_Worker">
	WORKER :
	<SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
		<option value="*****************" selected="selected"></option>
		<option>*****************
	</SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
			<img src="IMAGES/return_menu.jpg">
</button>

<div id="inlineDatepick"></div>
 <input type="date" id="DATE1" Value='date' Size="9"></input>
 
<fieldset id="Partie_Basse_Fieldset">
	<legend> DAILY TIMETABLE per request</legend>
	<div name="MesLignes" id="Zone_Tab"></div>	
</fieldset> 

<script>

$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
		function(dates)
   		{
    		var dateText = $.datepick.formatDate(dates[0]);
   			document.getElementById("DATE1").value =dateText;
       		var dateArr = dateText.split("/");
        	var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];	 
		 
			if ($("#myDiv_TJour_"+IDfromDateText).length > 0)
			{
				// Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText);
			}
			else
			{
				// L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,dates);

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

function CreaTable(idJour,dates)
{
	//Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + "'></div>");
	//On crée un tableau pour le jour X 
	$("#myDiv_" +"TJour_" + idJour).append('<table id="TJour_' + idJour + '"></table>');
	// On crée le corp du tableau
	var tabBody = $('<tbody></tbody>'); 
	// On crée une ligne du tableau
	var row1 = $('<tr></tr>');  
	//On crée un Bouton New Line
	var tdTNewLine = $('<td bgcolor="#F0FFFF">New Line</td>');
	//On crée un Input pour la date
	var tdTDate = $('<td> Date </td>');
	//On crée un Select pour la tache
	var tdTSRequest = $('<td> Request </td>');
	//On crée un Input pour le Temps
	var tdTTime = $('<td> Time (h)</td>');
	//On crée une Zone de texte pour la description
	var tdTTADescription = $('<td>Description</td>');
	//On crée un Select pour le travailleur
	var tdTSWorker = $('<td>Worker</td>');

	var row2 = $('<tr></tr>');  
	//On crée un Bouton New Line
	var td2TNewLine = $('<td><input type="button" onclick="CloneLine(this.parentNode.parentNode);" id="TNewLine_' + idJour + '"></input></td>');
	//On crée un Input pour la date
	var td2TDate = $('<td><input type="date" size="9" id="TDate_' + idJour + '"></input></td>');
	//On crée un Select pour la tache
	var td2TSRequest = $('<td><select onChange="saveValue(this)" id="TSRequest_' + idJour + '"></select></td>');
	//On crée un Input pour le Temps
	var td2TTime = $('<td><input type="text" size="5" id="TTime_' + idJour + '"></input></td>');
	//On crée une Zone de texte pour la description
	var td2TTADescription = $('<td><textarea rows="2" cols="30" id="TTADescription_' + idJour + '"></textarea></td>');
	//On crée un Select pour le travailleur
	var td2TSWorker = $('<td><select onChange="saveValue(this)" id="TSWorker_' + idJour + '"></select></td>');
	
	// On ajout les colonne à la ligne 1
	row1.append(tdTNewLine);   
	row1.append(tdTDate);
	row1.append(tdTSRequest);
	row1.append(tdTTime);
	row1.append(tdTTADescription);
	row1.append(tdTSWorker);
	
	// On ajout les colonne à la ligne 2
	row2.append(td2TNewLine);   
	row2.append(td2TDate);
	row2.append(td2TSRequest);
	row2.append(td2TTime);
	row2.append(td2TTADescription);
	row2.append(td2TSWorker);
	
	//On ajoute les lignes dans le tboby
	tabBody.append(row1);
	tabBody.append(row2);
	//On place le tbody dans le tableau
	$("TJour_" + idJour).append(tabBody);
	
	//On ajoute la date dans l'input TDate+idJour	
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idJour).val(dateText);	
}

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

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

</script>
</body>
</html>

Ne fais rien pourtant par rapport a se que j'ai vu sur les site internet et au réponse que j'ai eu précédemment sur le forum se second code devrait mieux fonctionner que le 1er .
Pourquoi cela n'est pas le cas?
0
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
8 avril 2014 à 11:55
J'ai trouver une de mes erreur : 
function AffichDiv(idJour)
{
    //On masque TOUS les tableaux
 	$('div[name="MesTBL"]').hide(); 
	
    // On affiche celui que l'on a selectionné
 	$('#myDiv' + "#TJour_" + idJour).show();   
}

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


Bête erreur dans le copier/coller j'avais oublier de rectifier l'id.
Il faut maintenant que je lui donne réellement la forme d'un tableau.

0
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
Modifié par EnguerrandP le 8/04/2014 à 13:23
Voila encor quelque soucie au niveau du CSS met la création du tableau marche : 
<html>

<head>
 <meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
 <link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
 <link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
 <link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
 <script type="text/javascript" src="JS/JS_JQuery_1_11_0_C.js"></script>
 <script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
 <script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script> 
 <script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>

<body background="IMAGES/fond_Gris.jpg">

<div id="Top_Worker">
 WORKER :
 <SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
  <option value="*****************" selected="selected"></option>
  <option>*****************
 </SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
   <img src="IMAGES/return_menu.jpg">
</button>

<div id="inlineDatepick"></div>
 <input type="date" id="DATE1" Value='date' Size="9"></input>
 
<fieldset id="Partie_Basse_Fieldset">
 <legend> DAILY TIMETABLE per request</legend>
 <div id="Zone_Tab">
 </div> 
</fieldset> 


<style>

</style>
<script>

$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
  function(dates)
     {
      var dateText = $.datepick.formatDate(dates[0]);
      document.getElementById("DATE1").value =dateText;
         var dateArr = dateText.split("/");
         var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];  
   
   if ($("#myDiv_TJour_"+IDfromDateText).length > 0)
   {
    // Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText);
   }
   else
   {
    // L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,dates);

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

function CreaTable(idJour,dates)
{
 //Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + "'></div>");
 //On crée un tableau pour le jour X 
 $("#myDiv_" +"TJour_" + idJour).append('<table id="TJour_' + idJour + '"></table>').css("border","2px inset #000000");
 
 $("#TJour_" + idJour).append('<tr id="Row1_' + idJour + '"></tr>'); 
 //On crée un Bouton New Line
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">New Line</td>');
 //On crée un Input pour la date
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Date</td>');
 //On crée un Select pour la tache
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Requeste</td>');
 //On crée un Input pour le Temps
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Time (h)</td>');
 //On crée une Zone de texte pour la description
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Description</td>');
 //On crée un Select pour le travailleur 
 $("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Worker</td>');
 
 $("#TJour_" + idJour).append('<tr id="Row2_' + idJour + '"></tr>'); 
 //On crée un Bouton New Line
 $("#Row2_" + idJour).append('<td><input type="button" value="new line" onclick="CloneLine(this.parentNode.parentNode);" id="TNewLine_' + idJour + '"></input></td>');
 //On crée un Input pour la date
 $("#Row2_" + idJour).append('<td><input type="date" size="9" id="TDate_' + idJour + '"></input></td>');
 //On crée un Select pour la tache
 $("#Row2_" + idJour).append('<td><select  onChange="saveValue(this)" id="TSRequest_' + idJour + '"></select></td>');
 //On crée un Input pour le Temps
 $("#Row2_" + idJour).append('<td><input type="text" size="5" id="TTime_' + idJour + '"></input>');
 //On crée une Zone de texte pour la description
 $("#Row2_" + idJour).append('<td><textarea rows="2" cols="30" id="TTADescription_' + idJour + '"></textarea></td>');
 //On crée un Select pour le travailleur 
 $("#Row2_" + idJour).append('<td><select  onChange="saveValue(this)" id="TSWorker_' + idJour + '"></select></td>');

 // On met la valeur de la date sélectionner dans l'input TDate+idJour
 var dateText = $.datepick.formatDate(dates[0]);
 $("#TDate_"+idJour).val(dateText); 
}

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

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

</script>
</body>
</html>


La question de se topique est donc résolut.
Merci de votre aide.
(Cette question découle de se topique :[JQuery] Gestion de la valeur des éléments d'un tableau cloné)

Merci et que le café soit avec vous.
0
EnguerrandP Messages postés 295 Date d'inscription vendredi 26 avril 2013 Statut Membre Dernière intervention 15 juillet 2015 1
8 avril 2014 à 14:09
Salut voila j'ai rajouter le CSS à mon interface : 
<html>

<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_JQuery_1_11_0_C.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>

<body background="IMAGES/fond_Gris.jpg">

<div id="Top_Worker">
	WORKER :
	<SELECT id="Select_Worker" NAME="SWorker" onChange="saveValue(this)">
		<option value="*****************" selected="selected"></option>
		<option>*****************
	</SELECT>
</div>

<button id="Return" title="Return menu" type="button" onclick="self.location.href='Administrators_Menu.php'">
			<img src="IMAGES/return_menu.jpg">
</button>

<div id="inlineDatepick"></div>
 
<fieldset id="Daily_Fieldset">
	<legend> DAILY TIMETABLE per request</legend>
	<div id="Zone_Tab">
	</div>	
</fieldset> 


<style>
#inlineDatepick
{
	margin-top: 20px;
    margin-left:0px;          
}

#Top_Worker
{
	position : absolute;
	margin-top: 0px;
    margin-left:630px;          
}

#Return
{
	position : absolute;
	margin-top: 160px;
    margin-left:770px;          
}

#Daily_Fieldset
{				
    border: 1px inset #000000;
    width:820px;
	margin: 0;
	padding:0;
    margin-top:30px;
    margin-left:0px;	
}

#Zone_Tab
{ 
	overflow: auto;   
	height: 470px;
	margin-top:0px;
    margin-left:0px;          
}
</style>
<script>

$(function() 
{
   $('#inlineDatepick').datepick
   ({onSelect:
		function(dates)
   		{
    		var dateText = $.datepick.formatDate(dates[0]);
       		var dateArr = dateText.split("/");
        	var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];	 
		 
			if ($("#myDiv_TJour_"+IDfromDateText).length > 0)
			{
				// Il existe... donc j'affiche le tableau
                AffichDiv(IDfromDateText);
			}
			else
			{
				// L'element n'existe pas... je le crée ...
                CreaTable(IDfromDateText,dates);

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

function CreaTable(idJour,dates)
{
	//Je crée un nouveau div pour le clone du tableau d'origine
    $("#Zone_Tab").append("<div name='MesTBL' id='myDiv_" + "TJour_" + idJour + "'></div>");
	//On crée un tableau pour le jour X 
	$("#myDiv_" +"TJour_" + idJour).append('<table border="2" id="TJour_' + idJour + '"></table>').css("border","2px inset #000000");
	
	$("#TJour_" + idJour).append('<tr align="center" id="Row1_' + idJour + '"></tr>'); 
	//On crée un Bouton New Line
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">New Line</td>');
	//On crée un Input pour la date
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Date</td>');
	//On crée un Select pour la tache
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF" width="160px">Request</td>');
	//On crée un Input pour le Temps
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Time (h)</td>');
	//On crée une Zone de texte pour la description
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF">Description</td>');
	//On crée un Select pour le travailleur 
	$("#Row1_" + idJour).append('<td bgcolor="#F0FFFF"width="170px">Worker</td>');
	
	$("#TJour_" + idJour).append('<tr align="center" id="Row2_' + idJour + '"></tr>'); 
	//On crée un Bouton New Line
	$("#Row2_" + idJour).append('<td><input type="button" value="New" style="width: 100%;" onclick="CloneLine(this.parentNode.parentNode);" id="TNewLine_' + idJour + '"></input></td>');
	//On crée un Input pour la date
	$("#Row2_" + idJour).append('<td><input type="date" style="width: 100%;" id="TDate_' + idJour + '"></input></td>');
	//On crée un Select pour la tache
	$("#Row2_" + idJour).append('<td><select  style="width: 100%;" onChange="saveValue(this)" id="TSRequest_' + idJour + '"></select></td>');
	//On crée un Input pour le Temps
	$("#Row2_" + idJour).append('<td><input type="text" style="width: 100%;" id="TTime_' + idJour + '"></input>');
	//On crée une Zone de texte pour la description
	$("#Row2_" + idJour).append('<td><textarea rows="2" cols="25" style="resize: none;" id="TTADescription_' + idJour + '"></textarea></td>');
	//On crée un Select pour le travailleur 
	$("#Row2_" + idJour).append('<td><select  style="width: 100%;" onChange="saveValue(this)" id="TSWorker_' + idJour + '"></select></td>');

	// On met la valeur de la date sélectionner dans l'input TDate+idJour
	var dateText = $.datepick.formatDate(dates[0]);
	$("#TDate_"+idJour).val(dateText);	
}

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

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

</script>
</body>
</html>
0

Discussions similaires

Turbo C++
cs_jrod -
cmarsc -

1 réponse
tableau de nombre décimal vers tableau de nomber binaire
mkhadi -
mkhadi -

2 réponses
Etablir toutes les combinaisons possibles du Lotto
KBNchapal -
Mikaels35 -

6 réponses
TURBO C++ et blocks que choisir
norman bates -
Vale Erian -

1 réponse
afficher un tableau en php
Larose_1921 -
s -

1 réponse
Rejoignez-nous