PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

#1 10-05-2010 08:57:32

Sergnal
Membre
Inscription : 17-06-2009
Messages : 38

bordure et colspan firefox

Bonjour,

Je dois réaliser un tableau html interactif (via javascript) qui fait apparaitre/disparaitre des lignes à la volée (en changeant le display).

Tout marche comme je veux mais niveau graphisme il y a un bug que je suis incapable de résoudre : les colspans ne sont pas pris en compte sous firefox.

Ici le code :

  <table>

   
    <?php
    $j=0;

    while($data=mysql_fetch_assoc($req)){
    $j++;

      //génération de la partie visible
      //tableau
      echo "<tr  id='".$j."' class='ligne'>";
      foreach($data as $d){
      echo "<td>".$d."</td>";
    }

      //boutons modifier/supprimer
      echo "<td><input type='button' value='modifier' onClick=\"affich_add('".$j."ligne');\"><span onclick=\"document.location.replace('saisie_mon_exe.php?mode=suppr&cible=".$data['code']."');\"><br/>supprimer</span></td>
      </tr>"
;
    ?>

    <div id="modifier">
    <?php
    //partie cachee modifier
      echo "\n<tr id='".$j."ligne' class='ligne2'>";
        echo "<td colspan='4'>
          <form id='modifier"
.$j."' name='modifier' action='saisie_mon_exe.php' method='POST'> <span>Modifier</span><br/> Période <select name='champs[]'>";
         
          for($z=0;$z<count($tab_periode);$z++)
          {
            {
              if($tab_code[$z]==$data['code']) $selection = " selected='selected' ";
              else $selection = '';
              echo "<option value='".$tab_code[$z]."'".$selection.">".$tab_periode[$z]."</option>";
            }
          }
          echo "</select><input type='hidden' name='cible' value='".$data['code']."' />
          <br />Commentaire comptage<br />
          <textarea name='champs[]'>"
.$data['com_comptage']."</textarea>";
         
          echo "<br />Commentaire origine<br /><textarea name='champs[]'>".$data['com_origine']."</textarea><input type='hidden' name='mode' value='modifier' /><br />
          <span onclick=\"disparaitre('"
.$j."ligne')\">Annuler la modification</span><input type='submit' value='Modifier' />
         
          </form>
        </td>
      </tr>"
;
      }
    ?>
    </div>

  </table>

Avec une fonction javascript qui change juste le display et une feuille de style :

body, div, form, ul, ol, table {
  margin: 0;
  padding: 0;
}

body{
  width : 100%;
}

table{
  width : 80%;
  text-align :justify;
  border : 1px solid black;
  border-collapse : collapse;
  border-spacing : 0px;
}

td, th{
  border : 1px solid black;
  border-collapse : collapse;
  border-spacing : 0px;
  padding : 5px;
}

.ligne2 td{
  border: 2px solid blue;
  border-collapse : collapse;
  border-spacing : 0px;
  padding : 5px;
  background-color : tan;
  border-right : none;
}

Ca fait quelques temps que je planche sur le problème sans succès, tout conseil est le bienvenue.

Merci.

Hors ligne

#2 10-05-2010 12:24:51

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : bordure et colspan firefox

Saluton,
Si j'en juge par le bout de script ci-dessus, le HTML généré n'est pas valide.
Un bloc <tr> </tr> ne doit pas être inclus dans autre chose qu'un bloc <table></table>,<thead></tthead>,<tfoot></tfoot> ou <tbody></tbody>
Or, ton script inclus un bloc <tr> </tr> dans une <div></div>.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#3 10-05-2010 13:06:22

Sergnal
Membre
Inscription : 17-06-2009
Messages : 38

Re : bordure et colspan firefox

Oups, qu'on me coupe la tête. Merci pour la remarque. Erreur rectifiée mais problème demeure.

<table>
<?php
$j=0;
while($data=mysql_fetch_assoc($req)){
$j++;
//génération de la partie visible
echo "<tr id='".$j."' >";
foreach($data as $d){
echo "<td>".$d."</td>";
}
echo "<td><input type='button' value='modifier' onClick=\"affich_add('".$j."ligne');\"><span onclick=\"document.location.replace('saisie_mon_exe.php?mode=suppr&cible=".$data['code']."');\">supprimer</span></td></tr>";

//partie cachee
echo "\n<tr id='".$j."ligne' >";
echo "<td colspan='3'><form id='modifier".$j."' name='modifier' action='saisie_mon_exe.php' method='POST'> Periode : <select name='champs[]'>";
for($z=0;$z<count($tab_periode);$z++){
{
if($tab_code[$z]==$data['code']) $selection = " selected='selected' ";
else $selection = '';
echo "<option value='".$tab_code[$z]."'".$selection.">".$tab_periode[$z]."</option>";
}
}
echo "</select><input type='hidden' name='cible' value='".$data['code']."' /><br />Commentaire comptage<br /><textarea name='champs[]'>".$data['com_comptage']."</textarea>";
echo "<br />Commentaire origine<br /><textarea name='champs[]'>".$data['com_origine']."</textarea><input type='hidden' name='mode' value='modifier' /><br /><span onclick=\"disparaitre('".$j."ligne')\">Annuler</span><input type='submit' value='Modifier' /></form></td></tr>";
}
?>
</table>

Toujours le même problème sous firefox, toujours le bon comportement sous IE.

J'en profite pour simplifier la css.

td, th{
  border : 1px solid black;
  border-collapse : collapse;
  border-spacing : 0px;
  padding : 5px;
}

Hors ligne

#4 11-05-2010 09:07:18

Sergnal
Membre
Inscription : 17-06-2009
Messages : 38

Re : bordure et colspan firefox

Résolu grâce à un topic d'alsacréation, le problème venait en fait de ma gestion des apparitions/disparitions en javascript : j'utilisais un style.display = 'block' alors que style.display = '' donne bien le résultat attendu.

Merci pour tout.

Hors ligne

#5 11-05-2010 11:50:06

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : bordure et colspan firefox

'' n'est pas un attribut reconnu pour dispaly en CSS

block
    Object is rendered as a block element.
inline
    Default. Object is rendered as an inline element sized by the dimensions of the content.
list-item
    Microsoft Internet Explorer 6 and later. Object is rendered as a block element, and a list-item marker is added.
none
    Object is not rendered.
table-header-group
    Object is rendered as tHead. Table header is always displayed before all other rows and row groups, and after any top captions. The header is displayed on each page spanned by a table.
table-footer-group
    Object is rendered as tFoot. Table footer is always displayed after all other rows and row groups, and before any bottom captions. The footer is displayed on each page spanned by a table.
inline-block
    Object is rendered inline, but the contents of the object are rendered as a block element. Adjacent inline elements are rendered on the same line, space permitting.
table New for Internet Explorer 8
    Internet Explorer 8. Object is rendered as table.
inline-table New for Internet Explorer 8
    Internet Explorer 8. Object is rendered as table within an inline-block.
table-row New for Internet Explorer 8
    Internet Explorer 8. Object is rendered as tr.
table-row-group New for Internet Explorer 8
    Internet Explorer 8. Object is rendered as tBody. Table body is always displayed after table-header-group objects and before table-footer-group objects.
table-column New for Internet Explorer 8
    Internet Explorer 8. Object is rendered as col.
table-column-group New for Internet Explorer 8
    Internet Explorer 8. Object is rendered as colGroup.
table-cell New for Internet Explorer 8
    Internet Explorer 8. Object is rendered as cell (td) or header cell (th), depending on location within the table.
table-caption New for Internet Explorer 8
    Internet Explorer 8. Object is rendered as caption.
run-in New for Internet Explorer 8
    Internet Explorer 8. If the run-in box contains a block element, object is rendered as a block. If not, and the following sibling is a block (which is neither floating nor absolutely positioned), object is rendered as the first inline-block of the sibling. Otherwise, same as block.
ruby New for Internet Explorer 8
    Internet Explorer 8. Specifies that an element defines a ruby structure. This and the following values are from the CSS3 Ruby Module.
ruby-base New for Internet Explorer 8
    Internet Explorer 8. Specifies that an element defines a ruby base.
ruby-text New for Internet Explorer 8
    Internet Explorer 8. Specifies that an element defines a ruby text.
ruby-base-container New for Internet Explorer 8
    Internet Explorer 8. Specifies a container for one or more ruby base elements.
ruby-text-container New for Internet Explorer 8
    Internet Explorer 8. Specifies a container for one or more ruby text elements.


Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#6 11-05-2010 21:56:51

Jc
Membre
Lieu : Zillisheim - Alsace
Inscription : 15-04-2010
Messages : 1 629
Site Web

Re : bordure et colspan firefox

Merci Maljuna pour ce topo, j'en cherchais justement un pour me faire un aide mémoire.^^ wink

Dernière modification par Jc (11-05-2010 21:57:07)


POO PHP+Ajax en MVC avec PDO et Bases de données épaisses  : What else?

Hors ligne

#7 12-05-2010 10:18:28

Sergnal
Membre
Inscription : 17-06-2009
Messages : 38

Re : bordure et colspan firefox

Et bien c'est plus complet que ce que j'avais trouvé de mon côté.

Malheureusement "inline" ne donne pas non plus le résultat attendu et table-row & co sont inutilisable s'ils ne sont implémentés qu'à partir de IE8 (enfin dans quelques années pourquoi pas).

Hors ligne

Pied de page des forums