Sujet Précédent Sujet Suivant

JS : Firefox oui, autres navigateurs non...

Résolu
tets88 Messages postés 24 Date d'inscription vendredi 19 mai 2006 Statut Membre Dernière intervention 21 janvier 2011 - 17 nov. 2010 à 15:04
tets88 Messages postés 24 Date d'inscription vendredi 19 mai 2006 Statut Membre Dernière intervention 21 janvier 2011 - 18 nov. 2010 à 08:32
Bonjour,

Je me suis amusé à faire un calendrier. Sous Firefox il fonctionne no problemo amigo. Dès que j'essaye de l'ouvrir avec un autre navigateur (IE, safari et chrome testé) oulala marche papapas... En deux mots voilà ce que je fais : j'ai un tableau contenant les semaines d'un mois. Après 7 jours, je crée un nouvelle balise <tr> qui me permet d'aller à la ligne (nouvelle semaine). La premier semaine, tous les navigateurs la construise tiptop kodak. Mais dès que j'arrive dans mon instruction if, qui permet de savoir à combien de jour en est la semaine, sous IE (merci Firebug Lite) il écrit ceci : 
<tr class= "sem1">
   <td..></td>
   <td..></td>
...
</tr>
<><tr class="sem2"></>
<><tr class="sem3"></>

Alors pourquoi ça me met des <> sur IE, chrome, safarie et pas sur FF et quelle est la solution, please help ! 
          D  |
L |
M |
M |
J |
V |
S |


JS (good luck ;)): 
function calendrier(){
    var date = new Date();
    var jour = date.getDate();
    var moisActuel = date.getMonth();
    var annee = date.getFullYear();
    calendar(jour,moisActuel, annee, date);
}

function calendar(jour, mois, annee){
    var noSemaine=1;
    var d =new Date();
    var date= new Date(annee, mois);
    var premierJour = new Date();
    var premierJour = date;
    premierJour.setDate(1);
    premierJour = premierJour.getDay();
    var moisTab=new Array(12);
        moisTab[0]="Janvier";
        moisTab[1]="Février";
        moisTab[2]="Mars";
        moisTab[3]="Avril";
        moisTab[4]="Mai";
        moisTab[5]="Juin";
        moisTab[6]="Juillet";
        moisTab[7]="Août";
        moisTab[8]="Septembre";
        moisTab[9]="Octobre";
        moisTab[10]="Novembre";
        moisTab[11]="Décembre";
     var joursMois = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
     if (annee%4==0 && annee%100!=0 || annee%400==0){
         joursMois[1]=29;
     }
     var jourMoisActuel=joursMois[mois];
     $(".moisAvant").remove();
     $(".moisApres").remove();
     $(".moisAnnee").remove();
     if((mois)==d.getMonth() && (annee)==d.getFullYear()){
        $(".titreTab").append("<th class='moisAvantActuel'></th><th colspan='5' class='moisAnnee'></th><th class='moisApres'></th>")
     }
     else{
         $(".moisAvantActuel").remove();
         $(".titreTab").append("<th class='moisAvant'></th><th colspan='5' class='moisAnnee'></th><th class='moisApres'></th>")
     }
     $(".moisAnnee").html(moisTab[mois] + " "+annee);
     var tbody=$("#calBody");
     tbody.append("<tr class='sem"+noSemaine+"'>");
     var jourSemaine = 0;
     for(i=1; i<=premierJour;i++){
         if(mois==0){
             $(".sem"+noSemaine).append("<td class='jourMoisAvant'>"+(joursMois[11]-premierJour+i)+"</td>");
         }
         else{
             $(".sem"+noSemaine).append("<td class='jourMoisAvant'>"+(joursMois[mois-1]-premierJour+i)+"</td>");
         }
         jourSemaine++;
     }
     for(j=1; j<=jourMoisActuel;j++){
         if(j<jour){
             $(".sem"+noSemaine).append("<td class='jourAvant'>"+j+"</td>");
         }
         if(j==jour){
             $(".sem"+noSemaine).append("<td class='aujourdhui'>"+j+"</td>");
         }
         if(j>jour){
             $(".sem"+noSemaine).append("<td class='jourApres'>"+j+"</td>");
         }
         jourSemaine++
         if(jourSemaine==7){
             jourSemaine=0;
             noSemaine++;
             tbody.append("<tr class='sem"+noSemaine+">");
         }
     }
     for(k=1;jourSemaine!=0;k++){
        $(".sem"+noSemaine).append("<td class='jourMoisApres'>"+k+"</td>");
        jourSemaine++;
        if(jourSemaine==7){
            jourSemaine=0;
            noSemaine++;
            tbody.append("<tr class='sem"+noSemaine+">");
        }
     }
     $(".moisApres").click(function(){
        jour=-1;
        mois++;
        if(mois==12){
            mois=0;
            annee++;
        }
        clean(noSemaine);
        calendar(jour,mois,annee)
     });
     $(".moisAvant").click(function(){
         mois--
         if((mois)==d.getMonth() && (annee)==d.getFullYear()){jour=d.getDate();}
         else{jour=-1;}
         if(mois==-1){
            mois=11;
            annee--;
        }
        clean(noSemaine);
        calendar(jour,mois,annee)
     });
}

function clean(sem){
    for(i=1; i<=sem; i++){
       $(".sem"+i).remove();
    }
}


Problème depuis la ligne : if(jourSemaine==7){

3 réponses

Réponse 1 / 3
tets88 Messages postés 24 Date d'inscription vendredi 19 mai 2006 Statut Membre Dernière intervention 21 janvier 2011
17 nov. 2010 à 16:13
P****** ! J'ai trouvé l'erreur, perdre 3 heures pour une aussi petite erreur de rien... Ya de qu'à devenir fou !!!

Il manquait un ' à mes 2 lignes : 
tbody.append("<tr class='sem"+noSemaine+">");
==> 
tbody.append("<tr class='sem"+noSemaine+"'>");
.

Pour les personnes qui aimerait un calendrier qui fonctionne sur tout les navigateurs faîtes-moi signe !

Bonne suite !
3
Réponse 2 / 3
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
17 nov. 2010 à 20:15
Bonjour,
si je puis me permettre il est plus propre d'utiliser les méthodes mises à disposition pour créer des lignes et des colonnes
var oRow = oTable.insertRow(-1);
et
var oCell = oRow.insertCell (-1);
par exemple 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Création Table</title>
<style type="text/css">
.t_style {
  border : 1px solid #808080;
  empty-cells : show;
}
.t_style td {
  border : 1px solid #808080;
  background-color :  #f0f0f0;
  padding : 5px;
  font-family : Verdana;
  font-size : 13px;
}
</style>
</head>


<script type="text/javascript">
//-- Creation de la table
var oTable = document.createElement( 'table');
//-- Ajout de la table
document.body.appendChild( oTable);
//-- un peu de style
oTable.className = 't_style';
//-- Creation des lignes
for (var i = 0; i < 10; i++) {
  var oRow = oTable.insertRow(-1);
  //-- Creation des colonnes
  for (var k = 0; k < 5; k++) {
    var oCell = oRow.insertCell( - 1);
    //-- Ecriture data
    oCell.innerHTML = "Lig : " +i +" Col : " +k;
  }
}
</script>
</html>

de plus tu fermes tes balises TR quand ?. Pas vu dans ton code!

enfin si tu tiens à insérer de la sorte autant TOUT insérer d'un coup plutôt que pas morceau, moins de risque de perturber le DOM.

;O)
0
Réponse 3 / 3
tets88 Messages postés 24 Date d'inscription vendredi 19 mai 2006 Statut Membre Dernière intervention 21 janvier 2011
18 nov. 2010 à 08:32
Merci ! Je n'avais pas vu le chose sous cet angle mais en y réfléchissant, c'est tellement plus logique de faire des boucles imbriquées.

C'est en faisant des erreurs qu'on apprend...
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
sweetAlert
ckrisL -
ckrisL -

15 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Incrémentation d'une variable globale en javascript
forcels -
forcels -

4 réponses
Récupérer toutes les class d'un élément
cs_flexx -
flexx -

2 réponses
Rejoignez-nous