Greasemonkey, traiter les données d'un tableau

Greasemonkey, traiter les données d'un tableau - HTML/CSS - Programmation

Marsh Posté le 01-10-2013 à 22:01:13    

Salut
 
J'attaque un peu de dev sur Greasemonkey là. J'ai lu quelques docs pour comprendre, rien de bien sorcier.
 
Par contre là je sèche un peu, j'attaque pas par le plus simple peut être.
C'est pour récupérer les données (le plus dur :o)
 
Je voudrais récuperer les données d'un tableau (y a des tableaux en veux tu en voilà sur la page....)
 
 
En gros ca donne :

Code :
  1. <table width="100%" cellspacing="1" cellpadding="0" border="0" bgcolor="#5076C9">
  2. <tbody>
  3. <tr>
  4. <td>
  5. <table width="100%" cellspacing="1" cellpadding="8" border="0" bgcolor="#EDF2FC">
  6. <tbody>
  7. <tr>
  8. <td>
  9. <table>
  10. <tbody>
  11. <tr>
  12. <td bgcolor="#5076C9" align="left" colspan="">Numéro</td>
  13. <td bgcolor="#5076C9" align="left" colspan="">groupe</td>
  14. <td bgcolor="#5076C9" align="left" colspan="">Temps passé</td>
  15. <td bgcolor="#5076C9" align="left" colspan="">Total par G/S/A</td>
  16. </tr>
  17. <tr bgcolor="#EDF2FC">
  18. <td align="left" colspan="">
  19. <td align="left" colspan="">xxxxxxxxxx</td>
  20. <td align="left" colspan="">0 H,0 Min, 0 Sec</td>
  21. <td bgcolor="#EDF2FC" align="left" colspan="">0 H,0 Min, 0 Sec</td>
  22. </tr>


 
 
Ce qui est en gras est présent x fois. J'vois pas bien comment récupérer l'ensemble des 4 valeurs.
avec un getElementsByTagName("tr" ); ????
Le problème c'est que y en a partout des balises tr... donc faut que je traite le bon.
 
Merci par avance.
 
 
Une fois que j'aurai compris comment faire pour un ca devrait aller.
 
 
But : Une fois récupérer toutes les groupes de valeurs, bah j'aimerais afficher un petit popup ou autre, avec le récap.

Reply

Marsh Posté le 01-10-2013 à 22:01:13   

Reply

Marsh Posté le 10-10-2013 à 19:34:58    

Les valeurs se trouvent dans des balises td et non tr déjà.

 

Après tu as juste à trouver les combien t-ième td t'intéressent.

 

Petit exemple d'utilisation :

 

Ici on va ajouter au troisième tableau les valeurs des cellules du 2ème tableau.

 
Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <title>Page d'essai</title>
  5.  <style type="text/css">
  6.   div {
  7.    border-style: solid;
  8.    border-size: 1px;
  9.    margin: 10px 10px 10px 10px;
  10.    padding : 10px 10px 10px 10px;
  11.   }
  12.   table {
  13.    background-color: #000000;
  14.   }
  15.   th {
  16.    background-color: #5076C9;
  17.   }
  18.   td {
  19.    background-color: #FFFFFF;
  20.   }
  21.  </style>
  22.  <script type="text/javascript">
  23.   restart = 1;
  24.   function test() {
  25.    if (restart == 1) {
  26.     restart = 0;
  27.     el = document.getElementById('test');
  28.     for (i=2;i<4;i++) {
  29.      add = document.getElementsByTagName('td')[i];
  30.      clone = add.cloneNode(true);
  31.      clone.setAttribute('style', 'background-color: #FF0000');
  32.      el.appendChild(clone);
  33.     }
  34.    }
  35.   }
  36.  </script>
  37. </head>
  38. <body>
  39.  <div align="center">
  40.   <h1>Tableau 1</h1>
  41.   <table width="200" cellspacing="1" cellpadding="0" border="1">
  42.    <thead>
  43.     <th>col1</th>
  44.     <th>col2</th>
  45.    </thead>
  46.    <tbody>
  47.     <tr>
  48.      <td width="50%" align="center">1xxxxx</td>
  49.      <td width="50%" align="center">1yyyyy</td>
  50.     </tr>
  51.    </tbody>
  52.   </table>
  53.  </div>
  54.  <div align="center">
  55.   <h1>Tableau 2</h1>
  56.   <table width="200" cellspacing="1" cellpadding="0" border="1">
  57.    <thead>
  58.     <th width="50%" align="center">col1</th>
  59.     <th width="50%" align="center">col2</th>
  60.    </thead>
  61.    <tbody>
  62.     <tr>
  63.      <td width="50%" align="center">2xxxxx</td>
  64.      <td width="50%" align="center">2yyyyy</td>
  65.     </tr>
  66.    </tbody>
  67.   </table>
  68.  </div>
  69.  <div align="center">
  70.   <h1>Tableau 3</h1>
  71.   <table width="200" cellspacing="1" cellpadding="0" border="1">
  72.    <thead>
  73.     <th width="50%" align="center">col1</th>
  74.     <th width="50%" align="center">col2</th>
  75.    </thead>
  76.    <tbody>
  77.     <tr id="test">
  78.     </tr>
  79.    </tbody>
  80.   </table>
  81.  </div>
  82.  <div align="center"><input align="center" type="submit" value="Cliquer ici!" onClick="test();"></div>
  83. </body>
  84. </html>


Message édité par MaybeEijOrNot le 10-10-2013 à 21:16:46
Reply

Marsh Posté le 10-10-2013 à 23:52:44    

C'est un bout de code que t'as sortie d'un truc a toi
Je regarde ça demain a tête repenser mais je pense avoir compris l'idée
Merci

Reply

Marsh Posté le 11-10-2013 à 08:33:13    

Non j'ai repris en partie tes , le tout c'est de savoir si les cellules qui t'interessent auront une position fixe ou non. Si leur position est fixe tu peux les calculer d'avance, autrement il te faudra les trouver grâce à d'autres nœuds ou des expressions régulières pour vérifier le contenu.

Reply

Marsh Posté le 13-10-2013 à 16:43:53    

Nickel ca marche.
(172ème tableau, et balise TD :o)
Mais ca m'a permis de m'entrainer pour la trouver en utilisant la petite loop + un match (j'ai utilisé indexOf)
 
Maintenant, j'ai mes 4 entetes, et j'ai le champ des colonnes.
Plus qu'à stocker ça et à faire mes traitements dessus.
 
Du coup, si j'ai x lignes avec un petit total à faire sur une donnée.
Le plus simple et manipulable est de créer un tableau ?


Message édité par ordimans le 13-10-2013 à 16:54:33
Reply

Marsh Posté le 13-10-2013 à 22:37:20    

Pas forcément, tu peux faire le traitement en même temps que tu récupères les données. Par contre faut extraire le texte, parce que pour l'instant on a juste utilisé les objets.
 
 
Je te laisse regarder un autre exemple qui reprend un peu toutes tes questions (dont le pop-up qu'il suffira d'améliorer pour rajouter une petite croix) :
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <title>Page d'essai</title>
  5.  <style type="text/css">
  6.   div {
  7.    border-style: solid;
  8.    border-size: 1px;
  9.    margin: 10px 10px 10px 10px;
  10.    padding : 10px 10px 10px 10px;
  11.   }
  12.   table {
  13.    background-color: #000000;
  14.   }
  15.   th {
  16.    background-color: #5076C9;
  17.   }
  18.   td {
  19.    background-color: #FFFFFF;
  20.   }
  21.   input {
  22.    cursor: pointer;
  23.   }
  24.  </style>
  25.  <script type="text/javascript">
  26.   start = 0; //on va avancer étape par étape, à chaque étape on incrémente cette variable pour comprendre qu'on change d'étape
  27.   function test() {
  28.    if (start == 0) {
  29.     start = 1; //fameuse incrémentation
  30.     somme = ''; //une variable qui va stocker du texte
  31.     calc = 0; //on va s'amuser à calculer la somme des cellules donc on initialise la somme à 0
  32.     el = document.getElementById('test'); //l'élément où on va afficher nos cellules copiées (3ème tableau)
  33.     for (i=2;i<4;i++) {
  34.      add = document.getElementsByTagName('td')[i]; //on récupère les cellules qui nous intéresse
  35.      if (somme == '') {
  36.       somme += add.textContent; //la première fois on ajoute à la chaine uniquement la valeur
  37.      } else {
  38.       somme += ' + ' + add.textContent; //les fois suivantes on rajoute un '+' entre les termes
  39.      }
  40.      calc += eval(add.textContent); //on ajoute à la variable calc la valeur de la cellule
  41.      clone = add.cloneNode(true); //on clone l'élément à mettre dans le 3ème tableau
  42.      clone.setAttribute('style', 'background-color: #FF0000'); //on va changer la couleur de fond de notre élément
  43.      el.appendChild(clone); //on ajoute l'élément cloné
  44.     }
  45.     document.getElementById('input').value = 'cliquer à nouveau !'; //on vient de finir une étape donc on change le texte à afficher sur le bouton clicable
  46.    } else if (start == 1) {
  47.     start = 2; //hop changement d'étape
  48.     div = document.createElement('div'); //on crée un élément div qui va servir de "pop-up"
  49.     document.body.appendChild(div);
  50.     div.textContent = somme + ' = ' + calc; //on affiche "x + y = z"
  51.     div.setAttribute('style', 'z-index: 1; position: absolute; top: 50px; left: 300px; background-color: #DDDDDD; cursor: pointer;'); //on positionne notre div sur la page, le z-index permet de faire passer cet élément par-dessus les autres qui ont de base un z-index de 0, on change l'aspect du curseur de la souris pour indiquer que cet élément est clicable
  52.     div.setAttribute('onClick','this.style.display = "none";'); //quand on clique sur notre div elle se désactive et disparait donc
  53.     document.getElementById('input').value = 'Fin !'; //on vient de finir une étape donc on change le texte à afficher sur le bouton clicable
  54.    } else {
  55.     start = 0; //hop on change d'étape, on retourne à l'étape initiale
  56.     document.body.removeChild(div); //on retire notre div désactivée
  57.     while (el.firstChild) {
  58.      el.removeChild(el.firstChild); //on retire les éléments enfants (qu'on a ajouté) de notre 3ème tableau tant qu'il en a
  59.     }
  60.     document.getElementById('input').value = 'Cliquer ici!'; //on vient de finir une étape donc on change le texte à afficher sur le bouton clicable
  61.    }
  62.   }
  63.  </script>
  64. </head>
  65. <body>
  66.  <div align="center">
  67.   <h1>Tableau 1</h1>
  68.   <table width="200" cellspacing="1" cellpadding="0" border="1">
  69.    <thead>
  70.     <th>col1</th>
  71.     <th>col2</th>
  72.    </thead>
  73.    <tbody>
  74.     <tr>
  75.      <td width="50%" align="center">1xxxxx</td>
  76.      <td width="50%" align="center">1yyyyy</td>
  77.     </tr>
  78.    </tbody>
  79.   </table>
  80.  </div>
  81.  <div align="center">
  82.   <h1>Tableau 2</h1>
  83.   <table width="200" cellspacing="1" cellpadding="0" border="1">
  84.    <thead>
  85.     <th width="50%" align="center">col1</th>
  86.     <th width="50%" align="center">col2</th>
  87.    </thead>
  88.    <tbody>
  89.     <tr>
  90.      <td width="50%" align="center">3</td>
  91.      <td width="50%" align="center">4</td>
  92.     </tr>
  93.    </tbody>
  94.   </table>
  95.  </div>
  96.  <div align="center">
  97.   <h1>Tableau 3</h1>
  98.   <table width="200" cellspacing="1" cellpadding="0" border="1">
  99.    <thead>
  100.     <th width="50%" align="center">col1</th>
  101.     <th width="50%" align="center">col2</th>
  102.    </thead>
  103.    <tbody>
  104.     <tr id="test">
  105.     </tr>
  106.    </tbody>
  107.   </table>
  108.  </div>
  109.  <div align="center"><input align="center" type="submit" value="Cliquer ici!" onClick="test();" id="input"></div>
  110. </body>
  111. </html>

Reply

Marsh Posté le 14-10-2013 à 15:16:24    

Merci beaucoup, je regarde ça ASAP.
 
Autre question du coup qui est dans la continuité.
Est il possible avec les données récupérés, de remplir un formulaire sur une autre page (onglet) qui est ouvert ?
 
Ce formulaire est un pavé numérique composé de cette façon :

Code :
  1. <tr>
  2. <td class="" valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">3</td>
  3. <td class="selectedValue" valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">4</td>
  4. <td class="" valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">5</td>
  5. </tr>


 
ou de liste déroulante

Code :
  1. <div class="div2" style="">
  2. <select id="id_categorie" class="easy_select" onclick="formeEvoluer(event,$(this));" onchange="envoieListeDeroulante($(this).closest('select'));" name="categorie" size="1" style="">
  3. <option value="">-- Faites votre choix -- </option>
  4. <option selected="" value="1">Choix 1 </option>
  5. <option value="2">Choix 2 </option>
  6. <option value="3">Choix 3 </option>
  7. </select>
  8. </div>


Message édité par ordimans le 29-10-2013 à 21:34:28
Reply

Marsh Posté le 14-10-2013 à 18:18:31    

Avec greasemonkey je ne sais pas, après si tu fais ta propre extension Firefox tu dois pouvoir.
 
Néanmoins, tu peux toujours ajouter dynamiquement le formulaire à ta page et l'utiliser.

Reply

Marsh Posté le 14-10-2013 à 23:18:15    

Hum je vois.
Le top serait que j'arrive avec un bouton à faire les sélections sur l'autre onglet. :D
 
Bon, last question. (Maintenant que je sais récupére mes données, j'hésite sur la façon derrière pour les "afficher" )
Dans ton premier exemple tu dupliques un tableau.
 
Là si j'ai un tableau. Y a moyen de supprimer des lignes du tableau ??
Par exemple les lignes avec un temps de moins d'une heure (je traite les données et si c'est le cas, boum je delete toute la ligne ?)
 
Ou à faire un autre tableau en dessous ou à côté ?? Ca c'est comme ton premier possible.
Ca je pense que c'est possible, faut juste réussir à bien le caler au bon endroit :D
 
Ou encore, à part la méthode popup pour l'affichage, y en a d'autres ?

Ah oui aussi, la première balise que je récupère avec mon getElementsByTagName est un lien. Donc j'ai un  
<a href=.............> NUMERO </a>
Y a bien une fonction pour récupérer juste le numéro ?

 
EDIT: Pour la dernière j'ai réussi avec :
 

Code :
  1. if (i == 176) {
  2.        numero = document.getElementsByTagName('td')[i].getElementsByTagName('a')[0].innerHTML;
  3.  
  4.            // href="blabla&num_incident=13100028">13100028</a>
  5.         alert(numero);
  6.    
  7.      }


 
Par contre, j'aimerais savoir pourquoi je peux pas partir de la valeur que j'avais récupéré avant, et que je suis obligé de refaire un document.getElementsByTagName('td')[i] et non variable. directement

Message cité 1 fois
Message édité par ordimans le 15-10-2013 à 00:00:44
Reply

Marsh Posté le 15-10-2013 à 15:55:40    

Pour le pop-up tu as la méthode à l'ancienne qui génère un vrai pop-up : window.open()
Le problème c'est qu'en fonction du navigateur et de ses réglages soit ça ouvre une nouvelle fenêtre soit un nouvel onglet soit un message pour te dire qu'un pop-up a été bloqué. xD
 
Pour la gestion entre onglets, le javascript inclue dans une page n'a pas la possibilité d'interagir avec d'autres fenêtres/onglets. Maintenant Greasemonkey est une extension qui ajoute du javascript aux pages. Les extensions Firefox sont du javascript mais avec une plus grande portée. Donc en fonction de comment est fait Greasemonkey ça peut être possible comme ça peut ne pas l'être, faudrait regarder de la doc.
 
 
Autrement pour tes histoires de tableaux on peut soit créer un nouveau tableau avec uniquement les lignes qui nous intéressent tout en gardant (clonage) ou en supprimant les lignes du tableau d'origine. Tu peux aussi uniquement modifier le tableau d'origine en supprimant les lignes qui ne t'intéressent pas.
 
 
Nouveau tableau avec clonage (déjà vu) :

Code :
  1. for (i=2;i<4;i++) {
  2.      add = document.getElementsByTagName('td')[i];
  3.      if (somme == '') {
  4.       somme += add.textContent;
  5.      } else {
  6.       somme += ' + ' + add.textContent;
  7.      }
  8.      calc += eval(add.textContent);
  9.      clone = add.cloneNode(true);
  10.      clone.setAttribute('style', 'background-color: #FF0000');
  11.      el.appendChild(clone);
  12.     }


 
 
Nouveau tableau sans clonage (déplacement des cellules) :

Code :
  1. for (i=2;i<4;i++) {
  2.      add = document.getElementsByTagName('td')[i];
  3.      if (somme == '') {
  4.       somme += add.textContent;
  5.      } else {
  6.       somme += ' + ' + add.textContent;
  7.      }
  8.      calc += eval(add.textContent);
  9.      el.appendChild(add);
  10.     }


(vérifier qu'on ne rentre pas dans une boucle infinie ou "distordue" parce qu'on bouge l'élément mais de souvenir ça ne pose pas de problème)
 
 
Pour supprimer les lignes inintéressantes tu as 2 choix (désactiver ou réellement supprimer)

Code :
  1. ton_element.style.display = 'none';


ou

Code :
  1. ton_element.parentNode.removeChild(ton_element);


 
 
 
 
 

ordimans a écrit :

Par contre, j'aimerais savoir pourquoi je peux pas partir de la valeur que j'avais récupéré avant, et que je suis obligé de refaire un document.getElementsByTagName('td')[i] et non variable. directement


 
Si tu as bien mis le code dans ta boucle alors normalement non ça ne devrait pas poser de problème.
Si c'est en dehors de ta boucle alors ça ne devrait rien te renvoyer car en sortie de boucle ton i a la valeur max atteinte en fin de boucle et du coup ça m'étonnerait qu'il soit à 176.
De plus si tu as créé le nouveau tableau avant l'ancien il y a peut-être une réindexation des tags (mais ça m'étonnerait puisque les autres sont ajoutés dynamiquement et ne sont a priori pas parcourus par la méthode getelementsbytagname).


Message édité par MaybeEijOrNot le 15-10-2013 à 16:02:08
Reply

Marsh Posté le 15-10-2013 à 15:55:40   

Reply

Marsh Posté le 15-10-2013 à 23:08:18    

Merci beaucoup pour toutes ses indications. Je verrais après pour l’interaction du coup. car me lancer dans une extension Firefox c'est pas rien quand même.
Là j'ai bien avancé, et surtout j'ai compris le principe de manipulation du coup ca va tout seul, je m'amuse.
 

  • Pour mon dernier soucis, ca venait du fait que je faisais un innerHTML avant et du coup quand je recherchais dans cette variable.getElementsByTagName('a') ca merdait.

Maintenant je fais le innerHTML que à l'affichage au final.
(Par contre, sans le innerHTML, ca affichait Objet Collection, c'est une collection dans quel sens ? par curiosité )
 

  • Pour la suppression de ligne, cette ligne est bien plus efficace :
Code :
  1. ton_element.style.display = 'none';


Ca efface immédiatement la ligne. L'autre m'a effacé par celulle en faite. (sympa aussi, faut juste que je comprenne le principe)
 

  • Enfin, une question là, et je vois pas trop comment faite.

J'ai 4 colonnes, la dernière est le total de temps par rapport à la colonne 1.
Admettons j'ai
Colonne 1 >> Colonne 3 >> Colonne 4
A >> 1h >> 1h  
B >> 1h >> 1h
C >> 2h >> 5h
C >> 3h >> 5h (même celulle)
 
En somme j'aurais qu'une seule cellule pour tout les lignes ayant C dans la colonne 1. Compris ?
Du coup là pour mon traitement, que j'avais fait par lot de 4, ca me décale tout.
 
Ma seule idée que j'ai en écrivant le message, c'est de recalibrer la position de la ligne en vérifiant la donnée...
Ou alors, y a moyen de compter le nombre de cellule pour la ligne peut être ?
Ou alors la différence c'est qu'il y a 4 td pour la première et après 3. (on peut compter le nombre de td rapidement je présume)
 
 
PS: mon petit bout de code te parlera plus peut être :
 

  • Pour les commentaires je trouve pas ça pratique.

y a que le // ou /* */ ??
Je fais pas la différence entre mes commentaires, et le code commenté :o[#9BFF00][/#9BFF00]
 

Code :
  1. var incident;
  2. var maxIncident = 10;
  3. var debutTableau;
  4. var temps;
  5. var pos1Virgule;
  6. var pos2Virgule;
  7. var tempsHeure=0;
  8. var tempsMinute=0;
  9. var numero;
  10. //incident = document.getElementsByTagName('td')[0].innerHTML;
  11.    restart = 1;
  12.    if (restart == 1) {
  13.     restart = 0;
  14.    
  15.     //### Recherche du debut tableau
  16.     for (i=1;i<1000;i++) {
  17.    
  18.      //### Test Modulo  
  19.    
  20.      /*if ( (i % 100) == 0) {
  21.       alert(i);     
  22.      }*/
  23.    
  24.      incident = document.getElementsByTagName('td')[i];
  25.      if (incident.innerHTML == 'N° incident'){
  26.     debutTableau = i+4;
  27.      break;
  28.   }
  29.     }
  30.     alert('FIN Recherche Tableau');
  31.    
  32.     //  On parcourt le tableau du début et on incrémente de 4 pour tomber sur la prochaine ligne
  33.     //  Puis on fera le traitement à l'intérieur du FOR, en sachant que les positions sont fixes pour chaque colonne
  34.     //  OU PAS
  35.      for (i = debutTableau; i < debutTableau+maxIncident*4; i+=4) {
  36.            
  37.        // On extrait le temps  ###
  38.      // Exemple :  "18 H,0 Min, 39 Sec"
  39.      temps = document.getElementsByTagName('td')[i].innerHTML;
  40.      alert(temps);
  41.      // Position de la première et dernière virgule
  42.    
  43.      pos1Virgule = temps.indexOf("," );
  44.      pos2Virgule = temps.lastIndexOf("," );
  45.      //alert(pos1Virgule + ' / ' + pos2Virgule);
  46.    
  47.      // On récupère le temps en fonction des positions des virgules
  48.      tempsHeure = temps.substring(0,pos1Virgule-1);
  49.      tempsMinute = temps.substring(pos1Virgule+1,pos2Virgule-3);
  50.      //alert(tempsHeure + ' / ' + tempsMinute);
  51.    
  52.      // On converti en number ###
  53.      tempsMinute = parseInt(tempsMinute);
  54.      tempsHeure= parseInt(tempsHeure);
  55.    
  56.    
  57.      // Si minute supérieur à  30 minutes on ajoute une heure
  58.      if (tempsMinute > 30) {
  59.      tempsHeure = tempsHeure +1;
  60.      }
  61.    
  62.        //alert(tempsHeure);
  63.    
  64.      }
  65. }


Message édité par ordimans le 15-10-2013 à 23:18:25
Reply

Marsh Posté le 16-10-2013 à 13:42:23    

Une extension Firefox n'est pas forcément très difficile à mettre en place, bon je ne m'en rappelle plus maintenant mais c'est l'histoire de 2 ou trois fichiers.
 
 
Pour la suppression, la méthode css désactive uniquement l'élément alors que la méthode javascript le supprime complètement, donc si tu fais ça sur une cellule ça va peut-être déconner car tu n'auras plus le bon nombre de cellules par ligne (à vérifier).
 
 
Pour ton problème de colonnes il me manque des détails, est-ce que tu as toujours ABCC? Ou ça peut être AABC? ABCD? ABC?
Tu peux aussi décider de travailler par ligne au lieu de travailler directement sur les cellules. Après je ne comprends pas ton histoire de 3 cellules ou 4 cellules, avec le code s'il n'y a rien de compromettant ça me parlerait surement plus.
 
 
Dans ton bout de code, tu peux virer l'histoire de "start" à moins que tu en ais une utilité, c'était juste pour te montrer un exemple pas à pas.
La première boucle for n'a pas lieu d'être je pense, une boucle while serait plus appropriée. La deuxième boucle tu l'arrêtes à 10 lignes pour quelle raison? Fin de tableau?
Et en ce qui concerne le traitement sur les heures je pense qu'on peut faire un Regex qui te sorte ça plus facilement. Déjà "tempsHeure= parseInt(temps);" devrait te sortir ton temps en heure avec un peu de chance et ton temps en minutes doit pouvoir être chopé directement avec un Regex.

Reply

Marsh Posté le 16-10-2013 à 19:35:39    

Du coup j'ai fait quelques tests.
 

Code :
  1. tempsHeure= parseInt(temps);


fonctionne
 
 

Code :
  1. temps = temps.match(/(\d+)/g);
  2. tempsHeure = parseInt(temps[0]);
  3. tempsMinute = parseInt(temps[1]);
  4. tempsSeconde = parseInt(temps[2]);


Dans cette expression régulière, les '/' délimitent le motif, les parenthèses entourent l'élément qui doit être capturé, '\d' signifie qu'on cherche un chiffre (équivaut à [0-9]), le '+' signifie que le '\d' (donc un chiffre) peut être répété plusieurs fois, le 'g' est en dehors du motif, c'est ce qu'on appelle un flag, il signifie qu'on va capturer toutes les occurences répondant aux critères de recherche et non uniquement la première. Il existe un second flag, le 'i' qui lui signifie qu'on ne tient pas compte de la casse, les deux flags peuvent être combinés.
 
 
 
 
PS : c'est if (tempsMinute > 29) ou if (tempsMinute >= 30) que tu veux faire je pense.


Message édité par MaybeEijOrNot le 16-10-2013 à 19:39:52
Reply

Marsh Posté le 16-10-2013 à 21:28:47    

Salut
 
Ah en gros le  

Code :
  1. tempsHeure= parseInt(temps);


 
Va caster le nombre. C'est sympathique. (je me suis pris la tête pour rien en effet mais ca marchait :D)
 
Merci pour le regex. Après niveau perf, je sais pas du tout ce qui est le mieux mais bon.
JE vais utiliser ton code.
 
Pour le 30 minutes c'est un détail, je verais si je mets strictement ou supérieur ou égal.
 
 
Pour l'histoire de tableau, avec l'exemple c'est plus simple en effet.
En faite je peux ne pas avoir le 4ème <td> :
 

Code :
  1. <tr bgcolor="#FFFFFF">
  2. <td align="left" colspan="">
  3. <td align="left" colspan="">AAAAAAAAAAAAAA</td>
  4. <td align="left" colspan="">1 H,20 Min, 52 Sec</td>
  5. <td bgcolor="#EDF2FC" align="left" colspan="" rowspan="2">18 H,3 Min, 9 Sec</td>
  6. </tr>
  7. <tr bgcolor="#EDF2FC">
  8. <td align="left" colspan="">
  9. <td align="left" colspan="">AAAAAAAAAAAAAA</td>
  10. <td align="left" colspan="">16 H,42 Min, 17 Sec</td>
  11. </tr>
  12. <tr bgcolor="#FFFFFF">
  13. <td align="left" colspan="">
  14. <td align="left" colspan="">BBBBBBBBBBBBBBBB</td>
  15. <td align="left" colspan="">0 H,0 Min, 0 Sec</td>
  16. <td bgcolor="#FFFFFF" align="left" colspan="" rowspan="3">1 H,11 Min, 58 Sec</td>
  17. </tr>


 
 
Sur le second AAAAAAAAAAAAAA, comme c'est la même entité que le premier, le total d'heure a déjà été calculé.
Pigé ?
 

Citation :

La première boucle for n'a pas lieu d'être je pense, une boucle while serait plus appropriée. La deuxième boucle tu l'arrêtes à 10 lignes pour quelle raison? Fin de tableau?


Je note le while, tellement l'habitude du for :o
POur la seconde boucle, c'est juste pour les tests, je limite afin que ce soit pas trop long sinon, le test dure trop longtemps. Le début me suffit à voir si ca part bien.
 

Citation :

Pour la suppression, la méthode css désactive uniquement l'élément alors que la méthode javascript le supprime complètement, donc si tu fais ça sur une cellule ça va peut-être déconner car tu n'auras plus le bon nombre de cellules par ligne (à vérifier).


D'accord pour ça qu'on voyait une légère bande de quelques pixels.
Donc la méthode javascript est mieux, faut juste que je la maitrise :D


Message édité par ordimans le 16-10-2013 à 21:30:54
Reply

Marsh Posté le 16-10-2013 à 22:19:39    

Avec le

Code :
  1. incident.parentNode.removeChild(incident);


 
Il y a bien une réindexation des tags.
Ca m'en saute un en faite.
(donc faut que quand je supprime un element, je fasse un -1 sur le compteur)
Ca devient intéressant :D


Message édité par ordimans le 16-10-2013 à 22:20:01
Reply

Marsh Posté le 16-10-2013 à 22:47:25    

Oui du coup ça devient intéressant car on peut retravailler ton tableau d'origine avant de faire le traitement.
 
Pour la suite, je pense que soit on va travailler par ligne soit on modifie ton tableau d'origine pour qu'il n'y ait que 3 cellules (voire 2 puisque la première est vide et non fermée) à chaque ligne.
Toi ce que tu veux à chaque fois c'est juste le AAAAAAAAA et le temps?
 
 
 
Je voulais regarder l'incidence d'une cellule sur 2 lignes au niveau de son élément parent mais j'ai un problème pour chopper la cellule depuis la ligne, je ne sais pas pourquoi, je suis claqué ce soir donc je regarderai ça demain.

Reply

Marsh Posté le 16-10-2013 à 23:01:34    

J'viens de faire une bidouille, et ca me semble pas trop mal marcher.
En gros je suis parti à la recherche du début du tableau.
ensuite je traite ligne par ligne et non cellule par cellule ce qui me paraissait plus sympa en faite. (je sais plus pourquoi)
Ah si vu que au final, sur une ligne, j'ai toujours le même ordre pour mes données, avec cette dernière cellule qui y est ou pas;
 
Donc j'ai fait pour une cellule, la récupération de mes données nécessaires (la dernière colonne, jmef en effet, enfin pour l'instant)
Je peux la ré-obtenir de toute façon.
Et donc j'ai fait ça , juste le passage intéressant, le reste à pas trop bouger.
(ah si j'ai fait un while du coup)
 
PS: Il y a des trucs je sais pas si c'est la bonne méthode, l'init de groupePrecedent, ou les variables init comme le i.
C'est pas nécessaire des fois je crois.
 
L'habitude du langage actuel où je déclare tout :o sans besoin d'initialiser.
 

Code :
  1. i=0;
  2.     trouve=0;
  3.     //### Recherche du debut tableau
  4.     while(trouve ==0) {
  5.    
  6.      //### Test Modulo  
  7.    
  8.      /*if ( (i % 100) == 0) {
  9.       alert(i);     
  10.      }*/
  11.    
  12.      incident = document.getElementsByTagName('td')[i];
  13.      if (incident.innerHTML == 'N° incident'){
  14.        // on a trouve le début du tableau on se cale sur la première celulle contenant les données
  15.     debutTableau = i+4;
  16.      trouve = 1;
  17.   }else {
  18.     i++;
  19.    }
  20.     }
  21.     alert('FIN Recherche Tableau =' + i);
  22.    
  23.     //  On parcourt le tableau du début et on incrémente de 4 pour tomber sur la prochaine ligne
  24.     //  Puis on fera le traitement à l'intérieur du FOR, en sachant que les positions sont fixes pour chaque colonne
  25.     //  OU PAS
  26.    
  27.    
  28.     //on init le groupePrecedent a null afin que le premier test fonctionne la première fois
  29.      groupePrecedent = null;
  30.    
  31.      for (i=debutTableau; i<220;i+=4) {
  32.            
  33.                  
  34.        incident = document.getElementsByTagName('td')[i];
  35.        //alert(incident.innerHTML);
  36.    
  37.        //on recupere le numero de la premiere colonne
  38.        numero = incident.getElementsByTagName('a')[0].innerHTML;   
  39.        alert(numero);
  40.    
  41.    
  42.    
  43.        //on recupere le groupe de la deuxieme colonne
  44.        groupe =document.getElementsByTagName('td')[i+1].innerHTML;
  45.        alert(groupe);
  46.  
  47.       //on recupere le temps pour traitement futur
  48.       temps = document.getElementsByTagName('td')[i+2].innerHTML;
  49.  
  50.         //on test si le groupe actuel est le meme que celui d'avant
  51.        if (groupePrecedent != groupe) {
  52.          // c'est pas le cas on recupere le groupe actuel pour le prochain passage
  53.          groupePrecedent = groupe;
  54.          alert("groupe different" );
  55.        } else {
  56.    
  57.          // c'est le cas, alors on decremente i afin de se recalibrer car il n'y aura pas de 4eme celulle sur la prochaine ligne
  58.           i-=1;
  59.         alert("-1 sur i" );
  60.        }
  61.   }


Message édité par ordimans le 16-10-2013 à 23:02:50
Reply

Marsh Posté le 17-10-2013 à 11:58:10    

Oui ça va fonctionner comme ça, suffit de faire une petite simulation à la main rapidement pour s'en apercevoir.
 
Pour faire simple on va prendre ce tableau :

Code :
  1. <tr>
  2. <td id="0"><a href="#">N° incident</a></td>
  3. <td id="1"></td>
  4. <td id="2"></td>
  5. <td id="3"></td>
  6. </tr>
  7. <tr>
  8. <td id="4"><a>n°1</a></td>
  9. <td id="5">A</td>
  10. <td id="6">temps1</td>
  11. <td id="7">total1</td>
  12. </tr>
  13. <tr>
  14. <td id="8"><a>n°2</a></td>
  15. <td id="9">B</td>
  16. <td id="10">temps2</td>
  17. <td id="11" rowspan="2">total2</td>
  18. </tr>
  19. <tr>
  20. <td id="12"><a>n°3</a></td>
  21. <td id="13">B</td>
  22. <td id="14">temps3</td>
  23. </tr>
  24. <tr>
  25. <td id="15"><a>n°4</a></td>
  26. <td id="16">C</td>
  27. <td id="17">temps4</td>
  28. <td id="18">total3</td>
  29. </tr>


 
debutTableau = 1
 
Première boucle for :
i=4
numero=n°1
groupe=A
temps=temps1
TEST -> true : groupePrecedent=A
 
Deuxième boucle :
i=8
numero=n°2
groupe=B
temps=temps2
TEST -> true : groupePrecedent=B
 
Troisième boucle :
i=12
numero=n°4
groupe=C
temps=temps3
TEST -> false : i=11
 
Quatrième boucle :
i=15
numero=n°3
groupe=C
temps=temps4
TEST -> true : groupePrecedent=C
 
 
Bref c'est très bien, rien à redire, si ce n'est que le textContent est un peu plus propre que le innerHTML.
Oui il faut bien initier tes variables.
Par contre au niveau de la boucle While tu t'es un petit peu compliqué les choses, ceci serait plus propre :
 

Code :
  1. i=0;
  2. While(document.getElementsByTagName('td')[i].textContent != 'N° incident') {
  3. i++;
  4. }
  5. debutTableau=i+4;


 
 
L'autre solution pour éviter de travailler sur le nombre de cellules c'est de travailler sur les lignes <tr> et de ne prendre à chaque fois que les 3 premiers éléments.
Tu détectes ton début :

Code :
  1. document.getElementsByTagName('tr')[i].childNodes[0].textContent != 'N° incident';


Après dans ta boucle for tu te déplaces uniquement en i++ et tu choppes :

Code :
  1. incident=document.getElementsByTagName('tr')[i];
  2. numero=incident.childNodes[0].documentgetElementsByTagName('a')[0].textContent;
  3. groupe=incident.childNodes[1].textContent;
  4. etc.


 
Le childNodes me posait problème hier mais en fin de compte tu peux le remplacer par un getElementsByTagName('td') et ça devrait passer.


Message édité par MaybeEijOrNot le 17-10-2013 à 14:27:43
Reply

Marsh Posté le 17-10-2013 à 15:47:08    

Code :
  1. i=0;
  2. while (document.getElementsByTagName('tr')[i].getElementsByTagName('a')[0].textContent != 'N° incident') {
  3.    i++;
  4. }
  5. finTableau=i;
  6. while (typeof(document.getElementsByTagName('tr')[finTableau]) !== 'undefined') {
  7.    if (typeof(document.getElementsByTagName('tr')[finTableau].getElementsByTagName('a')[0]) !== 'undefined') {
  8.       finTableau++;
  9.    } else {
  10.       break;
  11.    }
  12. }
  13. debutTableau=i+1;
  14. groupePrecedent = null;
  15. for (i=debutTableau; i<finTableau; i++) {
  16.    incident=document.getElementsByTagName('tr')[i];
  17.    numero=incident.getElementsByTagName('td')[0].childNodes[0].textContent;
  18.    groupe=incident.getElementsByTagName('td')[1].textContent;
  19.    temps=incident.getElementsByTagName('td')[2].textContent;
  20. }


 
Ceci fonctionne bien, reste à percer le mystère de cette ligne :

Code :
  1. numero=incident.getElementsByTagName('td')[0].childNodes[0].textContent;


Si je mets :

Code :
  1. incident.childNodes[0].childNodes[0].textContent;


Je devrai obtenir le même résultat alors qu'en fait ça ne fonctionne pas.

Code :
  1. incident.childNodes[0];


Renvoie un objet texte.
 
Conclusion : le childNodes me renvoyait en fait mon indentation se trouvant entre le <tr> et le <td> :
 

Code :
  1. <tr>
  2.          <td id="4"><a href="#">n°1</a></td> //indentation de 9 espaces à gauche


 
Du coup ben c'est galère à utiliser mais ce code-ci fonctionne aussi :
 

Code :
  1. i=0;
  2. while (document.getElementsByTagName('tr')[i].getElementsByTagName('a')[0].textContent != 'N° incident') {
  3.    i++;
  4. }
  5. finTableau=i;
  6. while (typeof(document.getElementsByTagName('tr')[finTableau]) !== 'undefined') {
  7.    if (typeof(document.getElementsByTagName('tr')[finTableau].getElementsByTagName('a')[0]) !== 'undefined') {
  8.       finTableau++;
  9.    } else {
  10.       break;
  11.    }
  12. }
  13. debutTableau=i+1;
  14. groupePrecedent = null;
  15. for (i=debutTableau; i<finTableau; i++) {
  16.    incident=document.getElementsByTagName('tr')[i];
  17.    numero=incident.childNodes[1].childNodes[0].textContent;
  18.    groupe=incident.childNodes[3].textContent;
  19.    temps=incident.childNodes[5].textContent;
  20. }


Message édité par MaybeEijOrNot le 17-10-2013 à 15:49:49
Reply

Marsh Posté le 17-10-2013 à 23:24:32    

Super merci pour les infos, je regarde tranquillement tout ca demain.
 
Le childnode a l'air sympa. C'est vrai pourquoi ne pas se baser sur la balise du dessus :D
 
Pour le while, je suis vraiment pas habitué à les utiliser. Déjà que je l'ai récris deux fois :o
 
 
-Sinon, question avec ça on peut du coup ne pas afficher des élements d'une page, et y a moyen de bloquer les éléments avant leur chargement histoire d'optimiser le temps entre guillemets ?
 
-Autre chose, j'ai une page avec différents onglets dessus et quand je clique sur un onglet ca recharge toute la page (dont l'entete qui ne change pas, et change au final que l'onglet)
Y a moyen, de lui faire charger tout les onglets, et ensuite de pouvoir modifier pour que les onglets soient interactifs sans recharger la page du coup.
C'est à dire que ca permettrai de gagner du temps, mais je sais pas si avec du simple javascript externe c'est possible. (faudrait recoder la page) et surtout en Javascript je sais pas si c'est possible. Faut utiliser de l'ajax non ?
 
-Dernier truc, pour l'interaction entre deux onglets, à priori je suis tombé sur un truc hier.
Si tu fais un window.open(blabla)
et derrière tu fais référence avec un opener tu peux récupérer les éléments à priori.
Je retrouve plus le lien qui expliquait, mais ici c'est un exemple à priori :
http://www.rgagnon.com/jsdetails/js-0066.html
 
Donc ca serait possible. En gros, on ouvrirait une autre fenêtre et donc onglet et on pourrait transférer les valeurs qu'on a constitué sur la première page.
 
-Il me reste à regarder comment rajouter des boutons quand même pour enclencher les actions ou pas.
Afin d'activer ou pas les fonctions, car actuellement ca fait tout tout seul....


Message édité par ordimans le 17-10-2013 à 23:25:22
Reply

Marsh Posté le 18-10-2013 à 09:19:56    

La boucle for s'utilise uniquement quand tu connais ton nombre d'itérations à réaliser. La boucle while pour tout le reste, enfin en concurrence avec les fonctions récursives (des fonctions qui s'appellent elles-mêmes).
 

Code :
  1. for (i=0; i<10; i++) {
  2. //traitement
  3. }


n'est ni plus ni moins :

Code :
  1. i=0;
  2. while (i<10) {
  3. //traitement
  4. i++;
  5. }


 
La fin de la boucle for se détecte sur le nombre d'itérations à réaliser alors que la boucle while accepte n'importe quelle condition de fin.
 
 
 
 
- Non on ne peut pas gagner de temps de chargement car le javascript est réalisé en post-traitement dans le mesure où tu ne peux pas manipuler un élément avant qu'il soit créé. Par contre tu peux faire l'inverse, ne rien mettre dans ta page puis la construire par javascript (ou du moins les éléments lourds). Mais à moins d'avoir des choses très lourdes à afficher ou non le javascript ne te fera pas gagner de temps car de toute façon tes éléments créés sont ensuite interprétés par le moteur HTML.
 
- Je n'ai pas compris ton histoire d'onglets, l'ajax te permet d'envoyer une requête à un serveur et récupérer le retour sans avoir recharger la page.
 
- Je vais faire quelques tests sur le .opener() mais il semblerait que ce soit : tu ouvres depuis ta fenêtre A un pop-up B (onglet/fenêtre) et que depuis ce pop-up B tu puisses interagir avec la fenêtre A. Mais ça ne marcherait que de B vers A l'interaction.
 
- createElement('button'), appendChild(element) et setAttribute('attribut', 'valeur') sont tes amis, je les avais utilisé dans les premiers codes.
EDIT : testé, en effet de B vers A ça fonctionne et de A vers B tu ne sembles pas pouvoir.


Message édité par MaybeEijOrNot le 18-10-2013 à 09:59:08
Reply

Marsh Posté le 18-10-2013 à 10:22:25    

-C'est ça, le but serait de récupérer tout les onglets d'une page (qui à chaque fois tu cliques recharge intégralement la page, et les convertir en ajax afin de ne pas recharger la page)
 
 
-Il faut définir le mot intéraction. Est ce que sur la fenêtre B on peut récupérer les valeurs de la fenêtre A ?
Si je comprends, tu dis qu'on peut seulement de la fenêtre A mère récupéré ce qu'on a fait dans la fenêtre B. (c'est pas trop un problème suffit d'ouvrir dans l'ordre autre les fenêtres :D)


Message édité par ordimans le 18-10-2013 à 10:23:09
Reply

Marsh Posté le 18-10-2013 à 11:29:26    

Depuis B on peut manipuler les objets de A mais depuis A on n'a pas accès aux objets de B. Du coup si tu écris quelque chose dans A on doit pouvoir le récupérer depuis B par cette méthode. Au pire on peut toujours passer des valeurs dans la barre d'adresse.

Reply

Marsh Posté le 18-10-2013 à 12:05:58    

Ok donc ca ira. Le seul truc que je souhaite faire c'est passer les valeurs.
Et j'ai vu y a la méthode cookie aussi.

Reply

Marsh Posté le 18-10-2013 à 12:17:12    

Oui mais les cookies vont dépendre du nom de domaine.

Reply

Marsh Posté le 27-10-2013 à 20:04:19    

YOp
 
Bon j'ai repris avec un peu de retard, dur dur de s'y replonger dedans.
Merci beaucoup pour le dernier bout de code, j'ai adopté cette solution en traitant par ligne, donc par TR c'est juste 100x plus simple, pas besoin de se faire chier.
J'ai juste eu un petit soucis (par rapport à la première fonctionnalité) qui est de supprimer la ligne si heure et minute = 0
 
Et il fallait prévoir le cas où le premier temps est 0, ce qui supprimait et bien le temps Total, tu l'auras deviné. Du coup je l'ai stocké, et réinsérer la ligne d'après.
 
ET j'ai en plus redimensionné la case Temps Total quand une ligne était supprimé. Suffisait de faire un -1 au rowSpan, bref c'est tout simple. (j'étais même surpris que le blabla.rowSpan-=1; fonctionne)
 
Bref, là du coup c'était juste pour l'échauffement car c'est pas une fonction bien importante mais ca m'a permis de manipuler les cellules donc un bon entrainement.
Je sais où sont mes valeurs maintenant.
 
Là maintenant je veux rajouter un button, c'est fait, et quand je clique je dis d'appeler une fonction mais ca marche à moitié... (j'ai réussi une fois mais c'était en mettant le code alert direct.
 
Donc j'ai ma fonction déclaré après mes valeurs :
 

Code :
  1. function hello()
  2. {
  3. alert("COUCOU !!" );
  4. }


 
Puis
 

Code :
  1. var buttonnode= document.createElement('input');
  2.   buttonnode.setAttribute('type','button');
  3.   buttonnode.setAttribute('name',i);
  4.   buttonnode.setAttribute('value','Pointage');
  5.   buttonnode.setAttribute('OnClick' ,'hello();');
  6.   //buttonnode.setAttribute("onclick", "window.open('http://www.google.fr')" );
  7.   ligneEnCours.appendChild(buttonnode);


 
L'ouverture de la page google ca marche à chaque fois.
Mais l'autre j'y arrive pas ca appelle pas la fonction. Y a une nuance avec les double et simples quotes ? C'est ce que j'ai vu dans des scripts.
 
Si je mets  

Code :
  1. buttonnode.setAttribute('OnClick' ,"alert('TEST');"


ca fonctionne


Message édité par ordimans le 27-10-2013 à 20:05:49
Reply

Marsh Posté le 27-10-2013 à 21:11:44    

J'ai trouvé de cette façon :
 

Code :
  1. buttonSubmit.onclick=envoieData;


 
Là je suis en train de créer un form en javascript du coup.
Je pense ne pas avoir le choix pour passer 3 valeurs ?
 
J'explique, j'ai un bouton par ligne maintenant. Sauf que j'ai généré dynamiquement les boutons, et je n'ai pas les infos de la ligne sur ceux ci.
 
Donc y a t'il moyen de garder l'id de la ligne sur le boutton, et quand je clique dessus, j'appelle la fonction (ça c'est OK) et je récupère les éléments dans ma fonction, vu que j'ai l'ID.
 
Ou bien je suis obligé de passé par un form généré avec les différents champs et j'ouvre ma nouvelle page direct ?
 
 
Deux solutions... je suis parti sur la seconde...
 

Code :
  1. var dataForms = document.createElement('form');
  2.  
  3.  
  4.      dataForms.setAttribute('method','post');
  5.      dataForms.setAttribute('action', "submit.php" );
  6.  
  7.      dataForms.setAttribute('tempsHeure',tempsHeure);
  8.      dataForms.setAttribute('tempsMinute',tempsMinute);
  9.  
  10.      //alert(document.forms["general"].elements);
  11.  
  12.  
  13.      var textToSend= document.createElement('input');
  14.  
  15.   textToSend.setAttribute('type','text');
  16.   textToSend.setAttribute('name','data');
  17.   textToSend.setAttribute('value',numero);
  18.      textToSend.style.display = "none";
  19.  
  20.      var buttonSubmit= document.createElement('input');
  21.  
  22.   buttonSubmit.setAttribute('type','submit');
  23.   buttonSubmit.setAttribute('name','numero');
  24.   buttonSubmit.setAttribute('value','Soumettre');
  25.   //buttonSubmit.setAttribute('OnClick' ,"fuction hello()" );
  26.   //buttonSubmit.addEventListener('click',envoieData,false);
  27.   buttonSubmit.onclick=envoieData;
  28.   //buttonSubmit.setAttribute("onclick", "" );
  29.   //dataForms.appenChild(textToSend);
  30.   //dataForms.appenChild(buttonSubmit);
  31.   ligneEnCours.appendChild(dataForms);
  32.   ligneEnCours.appendChild(textToSend);
  33.   ligneEnCours.appendChild(buttonSubmit);


Reply

Marsh Posté le 27-10-2013 à 21:57:54    

J'ai trouvé un truc, bah j'y aurais jamais pensé. C'est une bidouille du Javascript je présume ??
Si y a moyen de faire autrement je prends en tout cas.
 
Ca marche nickel en tout cas, j'ai l'ID et je vais pouvoir tout récupérer :D
 
J'ai trouvé ça ici :
http://w3blog.fr/2010/11/19/eviter [...] avascript/
 

Code :
  1. buttonSubmit.onclick=function(){
  2.             return function(){
  3.                 return envoieData(i);
  4.             };
  5.           }();


 
EDIT:
 
Rectification je suis allé trop vite.
 
Donc on passe le paramètre qu'on souhaite tout à la fin, et dans les autres le nom de la variable.
Ouais c'est un peu bizarre à comprendre.... a coup de return....
 

Code :
  1. buttonSubmit.onclick=function(balise){
  2.             return function(){
  3.                   return envoieData(balise);
  4.                 };
  5.            }(i);


Message édité par ordimans le 27-10-2013 à 22:07:48
Reply

Marsh Posté le 27-10-2013 à 22:20:19    

Pas compris ton dernier truc, le lien que tu me donnes est une technique pour passer un paramètre dans une fonction sans exécuter la fonction si j'ai bien suivi (lu rapidement en diagonal). Déjà pour ça il y a les variables globales que l'on utilise depuis le début.
 
Enfin bref, pour garder le numéro de ligne il suffit de le passer dans l'id : id="button8" puis tu parse le numéro. Tu peux aussi utiliser l'objet "this" qui désigne l'objet appelant :
 

Code :
  1. onClick="test(this);


 

Code :
  1. test(el) {
  2.   id = el.id;
  3. }


 
 
Je n'ai pas tout suivi, mais tu peux passer plusieurs valeurs dans une seule en parsant :
 

Code :
  1. test = 'var1=val1,var2=val2,var3=val3';


 
Après, un coup de Regex et tu récupères plusieurs variables avec leurs valeurs associées.

Reply

Marsh Posté le 27-10-2013 à 22:29:35    

C'est ça.
En faite quand je mettais ma fonction sur le onclick, il l'appelait.
ET si je mettais mon paramètre bah ca marchait mais il l'appelait direct à l'exécution et non au click.
 
Du coup, là je passe tout en GET, c'est plus simple me semble t'il. Et j'utilise cette fonction trouvé :
 
 
Je testerais quand même si ca marche avec la technique du opener.
 
Mais là du coup j'arrive sur ma nouvelle page et j'ai mes valeurs donc c'est plutôt cool.
Me reste plus qu'à réussir à parser cette nouvelle page afin de sélectionner les valeurs récupérés dans des longues listes :D

Code :
  1. //recuperer n'importe quel valeur de URL en passant le nom
  2.   function getQuerystring(key, default_) {
  3.        if (default_==null) default_="";
  4.        key = key.replace(/[\[]/,"\\\[" ).replace(/[\]]/,"\\\]" );
  5.        var regex = new RegExp("[\\?&]"+key+"=([^&#]*)" );
  6.        var qs = regex.exec(window.location.href);
  7.        if(qs == null) return default_; else return qs[1];
  8.    }


 
 
J'ai découvert le this justement, on gagne du temps :D
Enfin ca fait référence à l'objet en cours de manipulation c'est ça ?
 
Du coup, plus besoin du forms que j'avais créé mais je me pose quand même une question.
Pourquoi ça ca ne marchait pas :
 
Je construit le forms, et je rajoute deux boutons dedans mais quand je mets le forms dans la balise TD, il affiche pas.
C'est juste par curiosité
 

Code :
  1. var dataForms = document.createElement('form');
  2.  
  3.      dataForms.setAttribute('name','general');
  4.      dataForms.setAttribute('method','post');
  5.      dataForms.setAttribute('action', "submit.php" );
  6.      dataForms.setAttribute('TR',i);
  7.      dataForms.setAttribute('numero',numero);
  8.      dataForms.setAttribute('tempsHeure',tempsHeure);
  9.      dataForms.setAttribute('tempsMinute',tempsMinute);
  10.  
  11.      //alert(document.forms["general"].elements);
  12.  
  13.  
  14.      var textToSend= document.createElement('input');
  15.  
  16.    textToSend.setAttribute('type','hidden');
  17.    textToSend.setAttribute('name','data');
  18.    textToSend.setAttribute('numero',numero);
  19.    textToSend.setAttribute('groupe',groupe);
  20.    textToSend.setAttribute('tempsHeure',tempsHeure);
  21.      //textToSend.style.display = "none";
  22.  
  23.      var buttonSubmit= document.createElement('input');
  24.  
  25.    buttonSubmit.setAttribute('type','button');
  26.    buttonSubmit.setAttribute('value','Pointage');
  27.    //buttonSubmit.setAttribute('OnClick' ,"fuction hello()" );
  28.    //buttonSubmit.addEventListener('click',envoieData,false);
  29.    //buttonSubmit.addEventListener('click',envoieData(this.i),false);
  30.    buttonSubmit.onclick=function(balise){
  31.             return function(){
  32.                   return envoieData(balise);
  33.                 };
  34.            }(i);
  35.    dataForms.appenChild(textToSend);
  36.    dataForms.appenChild(buttonSubmit);
  37.    //ligneEnCours.appendChild(textToSend);
  38.    //ligneEnCours.appendChild(buttonSubmit);
  39.      ligneEnCours.appendChild(dataForms);


Message édité par ordimans le 27-10-2013 à 22:30:29
Reply

Marsh Posté le 28-10-2013 à 11:40:21    

Code :
  1. dataForms.setAttribute('TR',i);
  2.      dataForms.setAttribute('numero',numero);
  3.      dataForms.setAttribute('tempsHeure',tempsHeure);
  4.      dataForms.setAttribute('tempsMinute',tempsMinute);


 
Ce ne sont pas des attributs de la balise form, il te faut créer à l'intérieur de ce form des inputs avec pour attributs ('name',numero) et ('value',numero).
 
 
Par contre je n'ai toujours pas compris ton problème avec le onClick, cet évènement déclenchera l'appelle de la fonction et de son argument au moment du clic, si tu charges la page avec une valeur pour ton paramètre, qu'elle change ensuite puis que tu cliques pour appeler ta fonction et bien tu auras la dernière valeur passée en paramètre.

Reply

Marsh Posté le 29-10-2013 à 19:58:51    

En faite au début j'avais mis
onclick = envoieData();
 
Du coup ca l’exécutait au chargement....
je connaissais pas la "bidouille" comme ça.
 
 
Bon sinon maintenant que j'ai mes données, que je suis sur l'autre site avec mes valeurs dans l'URL (simple et concis)
(On m'a parlé de localstorage aussi pour passer les valeurs de l'un à l'autre mais bon.... pourquoi faire compliqué)
 
 
Bref, j'ai trouvé ma balise TD contenant mon menu déroulant.
Et là j'ai ça :
(bon j'ai un menu caché je sais pas pourquoi)
 
 
Donc là ca va être marrant. faut que j'arrive à sélectionner la bonne valeur à chaque fois.
 
 

Code :
  1. <td align="left">
  2. <div class="main_div">
  3. <div class="div1" style="display:none;">
  4. <select style="height:0px;visibility:hidden;display:none;" name="alignement">
  5. <option selected="" value="">-- Faites votre choix -- </option>
  6. <option value="1">Clients sous contrat </option>
  7. <option value="2">Avant Vente </option>
  8. <option value="3">Contrats Internes </option>
  9. </select>
  10. <input id="categorie_text" class="helper_text" type="text" autocomplete="off" onclick="stopEvent(event);" onkeyup="filtreOption($(this))" style="width:200px" name="categorie_text">
  11. </div>
  12. <div class="div2">
  13. <select id="id_categorie" class="easy_select" onclick="formeEvoluer(event,$(this));" onchange="envoieListeDeroulante($(this).closest('select'));" name="categorie">
  14. <option selected="" value="">-- Faites votre choix -- </option>
  15. <option value="1">Clients sous contrat </option>
  16. <option value="2">Avant Vente </option>
  17. <option value="3">Contrats Internes </option>
  18. </select>
  19. </div>


Message édité par ordimans le 29-10-2013 à 21:34:14
Reply

Marsh Posté le 29-10-2013 à 22:52:53    

Normalement non, avec l'évènement onClick, la fonction est éxécutée qu'au moment du clique et non au chargement (d'où onClick, autrement ça serait un onLoad). Tu devais appeler ta fonction ailleurs, non?

Reply

Marsh Posté le 29-10-2013 à 23:58:30    

Quand tu disais le textContent est plus propre que le innerHTML, tu entendais quoi ?
 
Là par exemple, j'ai un innerHTML qui me ramène :
<font>Heure</font>
 
alors que le .textContent me ramène :
Heure tout court.
 
Change tout pour un while :D
 
 
Soit

Code :
  1. document.getElementsByTagName('td')[i].textContent != 'Heure'


 
ou
 

Code :
  1. document.getElementsByTagName('td')[heurePave].getElementsByTagName('font')[0].innerHTML


 
Les deux m'affiche Heure avec un alert.
Mais le second ne marche pas dans un while... il ne trouve jamais.


Message édité par ordimans le 30-10-2013 à 00:00:28
Reply

Marsh Posté le 30-10-2013 à 13:01:51    

Hum, question non technique.
 
J'ai une liste, qui peut contenir deux lignes avec le même contenu "CM". Donc j'ai mon petit while qui va me ramener la ligne, mais la première.
J'aimerais que dans le cas où il y a deux lignes avec CM, on affiche un petit popup ou autre.
 
Une idée ?
Une imbrication ou on continue de parcourir même si on a trouvé ?
 

Reply

Marsh Posté le 30-10-2013 à 13:36:22    

Perso j'imbriquerai un if avec une vérif au rang i+1 (vérifier que ligne[i+1] existe) ou au rang i-1 (commencer à partir de i=1).
Après ben tu continues de parcourir si tu veux faire autre chose, autrement tu utilises une variable initialisée à true puis tu la passes à faux quand ta ligne est trouvée.
 

Code :
  1. i=0;
  2. test=true;
  3. while(test && ligne[i+1]) {
  4. if() {
  5.   test=false;
  6. }
  7. i++;
  8. }


 
Je n'ai pas eu le temps de lire le reste.

Reply

Marsh Posté le 31-10-2013 à 11:17:18    

Petit soucis sur la partie pavé numérique qui est en jquery à priori.
j'ai bien sélectionné les chiffres, et simulé un click dessus.
Mais quand je valide la page (le formulaire) par un boutonValidation.click();
 
Bah ca me dit des erreurs ont été détectés, sur le pavé, à priori il manque un truc.
si je clique à nouveau sur un chiffre, ca passe.
 
Une idée ?
Je s ais pas si y a moyen de "débugger" pour voir qu'elle est la vérif effectué lors de la soumission.

Reply

Marsh Posté le 31-10-2013 à 16:03:26    

Bon dernièrement je n'ai pas trop suivi mais aux dernières nouvelles il n'y avait pas d'histoire de pavé numérique. :pt1cable:  
Qu'est-ce donc que cette histoire?
 
Non parce que j'essaye de situer un pavé numérique dans le contexte et je ne vois pas du tout à quoi ça peut bien te servir. Enfin bref un bout de code? Difficile de te dire d'où vient l'erreur sans le type d'erreur et sans le code.

Reply

Marsh Posté le 31-10-2013 à 21:04:53    

Désolé, je suis allé vite en besogne :D
 
C'est un pavé numérique ou tu appuies sur le chiffre, c'est à quoi ca ressemble.
Mais sinon ca donne ça  
 

Code :
  1. <table class="compteur_heure JQCompteur contenu">
  2. <tbody>
  3. <tr>
  4. <td class="" valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">0</td>
  5. <td class="" valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">1</td>
  6. <td valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">2</td>
  7. </tr>
  8. <tr>
  9. <td class="selectedValue" valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">3</td>
  10. <td class="" valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">4</td>
  11. <td class="" valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">5</td>
  12. </tr>
  13. <tr>
  14. <td valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">6</td>
  15. <td valign="middle" bgcolor="#91C2E0" align="center" style="border-radius:5px;height:40px;width:40px;border:solid black 1px;font-size:19px;">7</td>
  16. </tr>
  17. <tr style="display:none">
  18. <td align="left" colspan="3">
  19. <input type="text" value="0" name="compteur_heure">
  20. </td>
  21. </tr>
  22. </tbody>
  23. </table>


Donc j'ai récupéré mon objet avec la class, parfait d'ailleurs.
Bien que j'ai un doute du coup sur l'utilité des loop vu qu'il y a qu'un objet ayant cette class, j'ai pas besoin de faire de while pour tout parcourir tu confirmes ?
 
Donc en gros tu vois, on a les chiffres de 0 à 7.
Quand je clique dessus en temps normal, réellement ca fait un
 

Code :
  1. <td class="selectedValue"


 
Donc j'ai fait
choixHeure.setAttribute('class','selectedValue');
 
Ca marche bien, sauf qu'après quand je valide la page, bah il me dit des erreurs ont été détectés. Il doit faire une vérif mais laquelle.
ET je dois vraiment cliquer sur le chiffre.

Reply

Marsh Posté le 01-11-2013 à 14:03:54    

Si tu ne récupères pas la valeur en jquery (ce qui n'est pas vraiment utile) alors non tu n'as pas besoin de boucle, juste prendre l'élément de l'index 0.
 
Autrement setAttribute est plus pour créer une attribut quand il n'existe pas encore, mais bon ça modifie aussi valeur de l'attribut s'il existe déjà. Tu pourrais tout aussi bien faire :

Code :
  1. choixHeure.className = "selectedValue";


 
Enfin bref le problème n'est pas là, juste comme ça, tu as pensé à retirer l'ancienne selectedValue si tu en choisis une nouvelle? Parce qu'autrement tu te retrouves avec 2 cellules ayant pour class "selectedValue".
 
Après pourquoi tu dois vraiment cliquer sur le chiffre, ben ça dépend comment ça a été codé, c'est bizarre mais ça voudrait dire qu'il déclenche l'évènement sur le contenu de la cellule et non sur le cellule même.
 
 
Tu as quoi comme message d'erreur dans la console web?

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed