Vous n'êtes pas identifié(e).
Pages :: 1
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 :
<?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{
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
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
Oups, qu'on me coupe la tête. Merci pour la remarque. Erreur rectifiée mais problème demeure.
//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.
Hors ligne
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
'' 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
Merci Maljuna pour ce topo, j'en cherchais justement un pour me faire un aide mémoire.^^
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
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
Pages :: 1