JS : Firefox oui, autres navigateurs non... [Résolu]

Signaler
Messages postés
24
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
21 janvier 2011
-
Messages postés
24
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
21 janvier 2011
-
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

Messages postés
24
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
21 janvier 2011

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 !
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
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)
Messages postés
24
Date d'inscription
vendredi 19 mai 2006
Statut
Membre
Dernière intervention
21 janvier 2011

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...