ses deux script (Il ont théoriquement le même fonctionnement)
$("#Table_Jour_").append("<div name='MesTBL' id='myDiv" + idTable + "'></div>")
$("#Table_Jour_").clone().appendTo("#myDiv" + idTable)
dans la fonction (que j'ai aussi placer dans la création):Le principe d'une fonction est de pouvoir utiliser X fois les mêmes lignes de code sans avoir besoin de tout réécrire ailleurs.
$(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 ($("#myDivTable_Jour_"+IDfromDateText).length > 0) { // Il existe..donc j'affiche le tableau AffichDiv("Table_Jour_"+IDfromDateText); } else { // L'element n'existe pas.. je le crée ( clone).. CreaTable("Table_Jour_"+IDfromDateText); AffichDiv("Table_Jour_"+IDfromDateText); } } }); }); function AffichDiv(idTable){ //On masque TOUS les tableaux $('div[name="MesTBL"]').hide(); // On affiche celui que l'on a selectionné $('#myDiv'+ idTable).show(); } function CreaTable(idTable){ //On clone le tableau d'origine //et je lui donne comme ID : "MonTableau_"+ IDfromDateText $("#Partie_Basse_Div").append("<div name='MesTBL' id='myDiv" + idTable + "'></div>") $("#Table_Jour").clone().appendTo("#myDiv" + idTable) }
sa ne masque pas le tableau d'origine..... .show... ne cachera jamais un élément...c'est fait pour le montrer justement.
J'ai essayer avec :
$("#Table_Jour").hide();
et
$("#Table_Jour").show();
$("#Table_Jour").hide();devrait fonctionner.
display :"none";?
<body> <div id="inlineDatepick"></div> <input type="date" id="DATE1" Value='date' Size="9"></input> <br> <fieldset id="Partie_Basse_Fieldset"> <legend> DAILY TIMETABLE per request</legend> <div id="Partie_Basse_Div"> <table id="Table_Jour_" border="2"> <tbody> <tr align="center" id="Tab"> <td bgcolor="#F0FFFF"></td> <td bgcolor="#F0FFFF">Date</td> <td bgcolor="#F0FFFF">Request</td> <td bgcolor="#F0FFFF">Time(h)</td> <td bgcolor="#F0FFFF">Description</td> <td bgcolor="#F0FFFF">Worker</td> </tr> <tr align="center" id="Line"> <td> <input type="button" name="NLine" id="" size="3" value="New" onclick="CloneLine(this.parentNode.parentNode);"> </input> </td> <td> <input type="date" name="TI_Date" id="TI_Date" size="9" value="" readonly="readonly"></input> </td> <td> <SELECT id="TS_Request_" NAME="SRequest" onChange="saveValue(this)"> <option value="*****************" selected="selected"></option> <option>***************** </SELECT> </td> <td> <input type="text" name="time" id="TI_Time_" size="5" value=""></input> </td> <td> <textarea name="" id="TA_Description_" rows="2" cols="30" value=""></textarea> </td> <td> <SELECT id="TS_Worker_" NAME="SWorker" onChange="saveValue(this)"> <option value="*****************" selected="selected"></option> <option>***************** </SELECT> </td> </tr> </tbody> </table> </div> <div></div> </fieldset> <style> .foo { color: blue; } .foo td { border:1px; } </style> <script type="text/javascript"> $(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 ($("#myDivTable_Jour_"+IDfromDateText).length > 0) //Test la taille de l'objet si objet != vide alors il éxist { // Il existe..donc j'affiche le tableau AffichDiv("Table_Jour_"+IDfromDateText); } else($("#Table_Jour_"+IDfromDateText).length = 0) //Test la taille de l'objet si objet != vide alors il éxist { // L'element n'existe pas.. je le crée ( clone).. // et je lui donne comme ID : "Table_Jour_"+ IDfromDateText CreaTable("Table_Jour_"+IDfromDateText); } } }); }); function AffichDiv(idTable) { //On masque TOUS les tableaux $('div[name="MesTBL"]').hide(); // On affiche celui que l'on a selectionné $('#myDiv'+ idTable).show(); } function CreaTable(idTable) { $("#Table_Jour_").clone().insertAfter("#Table_Jour_"); $("#Table_Jour_").append("<div name='MesTBL' id='myDiv" + idTable + "'> Tableau : " + idTable + " </div>") var table = $('<table id="MonTableau_' + idTable + '"></table>').addClass('Table_Jour_'); var row = $('<tr></tr>'); for(i=0; i<3; i++) { var td = $('<td></td>').text('Cellule ' + i); row.append(td); } table.append(row); $('#myDiv'+ idTable).append(table); //On masque le DIV noouvellement créé $('#myDiv'+ idTable).hide(); } function CloneLine(Line) { newLine = Line.cloneNode(true); Line.parentNode.insertBefore(newLine,Line) //Line.parentNode.appendChild(newLine); } </script> </body>
$(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 ($("#Table_Jour_"+IDfromDateText).length > 0)//Test la taille de l'objet si objet != vide alors il éxist { // Je masque tout les tableaux $('.C_T_Jour').hide(); // J'affiche le tableau du jour sélectionné $("#Table_Jour_"+IDfromDateText).show(); } else($("#Table_Jour_"+IDfromDateText).length = 0)//Test la taille de l'objet si objet != vide alors il éxist { // Je masque tout les Tableaux $('.C_T_Jour').hide(); // Je fais apparaitre le tableau original pour le cloner $("#Table_Jour_").show(); // Je clone le tableau original $("#Table_Jour_").clone().insertAfter("#Table_Jour_"); //Je lui donne un nouvel ID : "Table_Jour_"+IDfromDateText $("#Table_Jour_").clone().attr('id', "#Table_Jour_"+IDfromDateText); //Je masque le tableau original $("#Table_Jour_").hide(); } } }); });
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question$(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 ($("#myDivTable_Jour_"+IDfromDateText).length > 0) //Test la taille de l'objet si objet != vide alors il éxist { // Il existe..donc j'affiche le tableau AffichDiv("Table_Jour_"+IDfromDateText); } else($("#myDivTable_Jour_"+IDfromDateText).length = 0) //Test la taille de l'objet si objet != vide alors il éxist { // L'element n'existe pas.. je le crée ( clone).. $("#Table_Jour_").clone().insertAfter("#Table_Jour_"); // et je lui donne comme ID : "Table_Jour_"+ IDfromDateText CreaTable("Table_Jour_"+IDfromDateText); } } }); }); function AffichDiv(idTable) { //On masque TOUS les tableaux $("table[name='mesTab']").hide(); // On affiche celui que l'on a selectionné $("#"+ idTable).show(); document.getElementById("DATE2").value = idTable; } function CreaTable(idTable) { $("#Table_Jour_").append("<div name='MesTBL' id='myDiv" + idTable + "'> Tableau : " + idTable + " </div>") var table = $('<table id="Table_Jour_' + idTable + '"></table>').addClass('Table_Jour_'); var row = $('<tr></tr>'); for(i=0; i<3; i++) { var td = $('<td></td>').text('Cellule ' + i); row.append(td); } table.append(row); $('#myDiv'+ idTable).append(table); //On masque le DIV noouvellement créé $('#myDiv'+ idTable).hide(); }
<script type="text/javascript"> $(window).load(function() { var dateTextInit = new Date(d,m,y); document.getElementById("DATE1").value = dateTextInit; var dateArr = dateTextInit.split("/"); var IDfromDateText= dateArr[2] + dateArr[0] + dateArr[1]; // Je clone le tableau original $("#Table_Jour_").clone().insertAfter("#Table_Jour_"); //Je lui donne un nouvel ID : "Table_Jour_"+IDfromDateText et à ces éléments $("#Table_Jour_").clone().attr('id', "#Table_Jour_"+IDfromDateText); //Je masque le tableau original $("#Table_Jour_").hide(); }); $(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]; var Id_Tab = $("#Table_Jour_"+IDfromDateText); if ($(Id_Tab).length > 0)//Test la taille de l'objet si objet != vide alors il éxist { //On masque TOUS les tableaux $('.Class_Tab_Jour').hide(); // J'affiche le tableau du jour sélectionné $(Id_Tab).show(); document.getElementById("DATE2").value = Id_Tab; } else($(Id_Tab).length = 0)//Test la taille de l'objet si objet != vide alors il éxist { // Je masque tout les Tableaux $('.Class_Tab_Jour').hide(); // Je fais apparaitre le tableau original pour le cloner $("#Table_Jour_").show(); // Je clone le tableau original $("#Table_Jour_").clone().insertAfter("#Table_Jour_"); //Je lui donne un nouvel ID : "Table_Jour_"+IDfromDateText et à ces éléments var New_Id = $("#Table_Jour_"+IDfromDateText); $("#Table_Jour_").clone().attr('id', New_Id); //Je masque le tableau original $("#Table_Jour_").hide(); } } }); }); function CloneLine(Line) { newLine = Line.cloneNode(true); Line.parentNode.insertBefore(newLine,Line) //Line.parentNode.appendChild(newLine); } </script>
<script type="text/javascript"> $(window).load(function() { var Date_Init = new Date(); var N_Day=Date_Init.getDate(); var N_Month=Date_Init.getMonth(); var N_Month_R=N_Month +1; var N_Year=Date_Init.getFullYear(); document.getElementById("DATE1").value = N_Month_R + "/" + N_Day + "/" + N_Year; var dateArr = Date_Init.split("/"); var IDfromDateText= dateArr[2] + dateArr[0] + dateArr[1]; // Je clone le tableau original $("#Table_Jour_").clone().insertAfter("#Table_Jour_"); //Je lui donne un nouvel ID : "Table_Jour_"+IDfromDateText et à ces éléments $("#Table_Jour_").clone().attr('id', "#Table_Jour_"+IDfromDateText); //Je masque le tableau original $("#Table_Jour_").hide(); }); $(function() { $('#inlineDatepick').datepick ({onSelect: function(dates) { var dateText = $.datepick.formatDate(dates[0]); var dateArr = dateText.split("/"); var IDfromDateText= dateArr[2] + dateArr[0] + dateArr[1]; document.getElementById("DATE1").value = dateText; var Id_Tab = $("#Table_Jour_"+IDfromDateText); if ($(Id_Tab).length > 0)//Test la taille de l'objet si objet != vide alors il éxist { //On masque TOUS les tableaux $('.Class_Tab_Jour').hide(); // J'affiche le tableau du jour sélectionné $(Id_Tab).show(); document.getElementById("DATE2").value = Id_Tab; } else($(Id_Tab).length = 0)//Test la taille de l'objet si objet != vide alors il éxist { // Je masque tout les Tableaux $('.Class_Tab_Jour').hide(); // Je fais apparaitre le tableau original pour le cloner $("#Table_Jour_").show(); // Je clone le tableau original $("#Table_Jour_").clone().insertAfter("#Table_Jour_"); //Je lui donne un nouvel ID : "Table_Jour_"+IDfromDateText et à ces éléments var New_Id = $("#Table_Jour_"+IDfromDateText); $("#Table_Jour_").clone().attr('id', New_Id); //Je masque le tableau original $("#Table_Jour_").hide(); } } }); }); function CloneLine(Line) { newLine = Line.cloneNode(true); Line.parentNode.insertBefore(newLine,Line) //Line.parentNode.appendChild(newLine); } </script>
function AffichDiv(idTable) { //On masque TOUS les tableaux $('div[name="MesTBL"]').hide(); // On affiche celui que l'on a selectionné $('#myDiv'+ idTable).show(); }
$("#Table_Jour").hide();
$("#Table_Jour").show();
<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_2_1_0.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> <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="Partie_Basse_Div"> <table id="Table_Jour" border="2" name="MesTBL"> <tbody> <tr align="center" id="Tab"> <td bgcolor="#F0FFFF"></td> <td bgcolor="#F0FFFF">Date</td> <td bgcolor="#F0FFFF">Request</td> <td bgcolor="#F0FFFF">Time(h)</td> <td bgcolor="#F0FFFF">Description</td> <td bgcolor="#F0FFFF">Worker</td> </tr> <tr align="center" id="Line"> <td> <input type="button" name="NLine" id="" size="3" value="New" onclick="CloneLine(this.parentNode.parentNode);"> </input> </td> <td> <input type="date" name="date" id="TDate" size="9" value="" readonly="readonly"></input> </td> <td> <SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)"> <option value="*****************" selected="selected"></option> <option>***************** </SELECT> </td> <td> <input type="text" name="time" id="" size="5" value=""></input> </td> <td> <textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea> </td> <td> <SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)"> <option value="*****************" selected="selected"></option> <option>***************** </SELECT> </td> </tr> </tbody> </table> </div> <div></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 ($("#myDivTable_Jour_"+IDfromDateText).length > 0) { // Il existe..donc j'affiche le tableau AffichDiv("Table_Jour_"+IDfromDateText); } else { // L'element n'existe pas.. je le crée ( clone).. CreaTable("Table_Jour_"+IDfromDateText); } } }); }); function AffichDiv(idTable) { //On masque TOUS les tableaux $('div[name="MesTBL"]').hide(); // On affiche celui que l'on a selectionné $('#myDiv'+ idTable).show(); } function CreaTable(idTable) { //On clone le tableau d'origine //et je lui donne comme ID : "MonTableau_"+ IDfromDateText $("#Table_Jour").append("<div name='MesTBL' id='myDiv" + idTable + "'></div>") $("#Table_Jour").clone().appendTo("#myDiv" + idTable) //On masque TOUS les tableaux $('div[name="MesTBL"]').hide(); // On affiche celui que l'on a selectionné $('#myDiv'+ idTable).show(); } </script> </body> </html>
<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_2_1_0.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> <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="Partie_Basse_Div"> <table id="Table_Jour" border="2" name="MesTBL"> <tbody> <tr align="center" id="Tab"> <td bgcolor="#F0FFFF"></td> <td bgcolor="#F0FFFF">Date</td> <td bgcolor="#F0FFFF">Request</td> <td bgcolor="#F0FFFF">Time(h)</td> <td bgcolor="#F0FFFF">Description</td> <td bgcolor="#F0FFFF">Worker</td> </tr> <tr align="center" id="Line"> <td> <input type="button" name="NLine" id="" size="3" value="New" onclick="CloneLine(this.parentNode.parentNode);"> </input> </td> <td> <input type="date" name="date" id="TDate" size="9" value="" readonly="readonly"></input> </td> <td> <SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)"> <option value="*****************" selected="selected"></option> <option>***************** </SELECT> </td> <td> <input type="text" name="time" id="" size="5" value=""></input> </td> <td> <textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea> </td> <td> <SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)"> <option value="*****************" selected="selected"></option> <option>***************** </SELECT> </td> </tr> </tbody> </table> </div> <div></div> </fieldset> <script> $(window).load(function() { $("#Table_Jour").hide(); }); $(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 ($("#myDivTable_Jour_"+IDfromDateText).length > 0) { // Il existe..donc j'affiche le tableau AffichDiv("Table_Jour_"+IDfromDateText); } else { // L'element n'existe pas.. je le crée ( clone).. CreaTable("Table_Jour_"+IDfromDateText); // ...puis j'affiche le tableau AffichDiv("Table_Jour_"+IDfromDateText); } } }); }); function AffichDiv(idTable) { //On masque TOUS les tableaux $('div[name="MesTBL"]').hide(); // On affiche celui que l'on a selectionné $('#myDiv'+ idTable).show(); } function CreaTable(idTable) { $("#Table_Jour").show(); //On clone le tableau d'origine //et je lui donne comme ID : "MonTableau_"+ IDfromDateText $("#Partie_Basse_Div").append("<div name='MesTBL' id='myDiv" + idTable + "'></div>") $("#Table_Jour").clone().appendTo("#myDiv" + idTable) $("#Table_Jour").hide(); } function CloneLine(Line) { newLine = Line.cloneNode(true); Line.parentNode.insertBefore(newLine,Line) //Line.parentNode.appendChild(newLine); } </script> </body> </html>