Checkbox -> Tableau -> Javascript ou php

miguel, le jeudi 17 avril 2008 à 16:31:27

Bonjour,

Je suis en plein projet et j'ai réalisé un tableau en php qui répertorie tous les champs d'une table.
Malheureusement, le tableau a énormément de colonnes.

C'est pour celà que sur une page, j'aimerais que l'utilisateur ai des cases à cocher pour pouvoir choisir les colonnes qui apparaitront dans le tableau.

Est-ce que quelqu'un a une idée de comment s'y prendre ou alors un exemple car je pense que je peux y arriver si j'ai un exemple. (enfin si quelqu'un m'a compris.)

Merci de votre aide.

Configuration: Windows XP
Firefox 2.0.0.14

Répondre à miguel Signaler ce message aux modérateurs Aller au dernier message

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

Dalida, le jeudi 17 avril 2008 à 19:58:01

salut,

avec JS tu peux coder une fonction qui affichera/masquera la colonne.
tu l'appelles depuis l'évènement 'onchange' de ton chexbox.
en gros ça devrait faire :

en HTML

<input onchange="toggleVisibility('col1')" type="checkbox" value="Nom de la colonne 1"/>
<input onchange="toggleVisibility('col2')" type="checkbox" value="Nom de la colonne 2"/>
<input onchange="toggleVisibility('col3')" type="checkbox" value="Nom de la colonne 3"/>
<input onchange="toggleVisibility('col4')" type="checkbox" value="Nom de la colonne 4"/>
<input onchange="toggleVisibility('col5')" type="checkbox" value="Nom de la colonne 5"/>

en JS

function toggleVisibility( id )
{
	var lmt = document.getElementById( id );
	if( lmt )
	{
		if( lmt.display = 'none' )
		{
			lmt.display = 'block';
		}
		else
		{
			lmt.display = 'none';
		}
	}
}

[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

miguel, le vendredi 18 avril 2008 à 09:02:29

Merci beaucoup, mais n'étant pas très doué en JS, je ne vois pas vraiment où poser ce code.

Voici mon fichier:

<?php
$odbc = odbc_connect('parcinfo','root','') or die("Could Not Connect to ODBC Database!");
?>

<html>
</head>

<link href="../style/style.css" rel="stylesheet" type="text/css" media="screen" />
		<script src='gestion/sorttable.js'></script>
		</head>
<title>Gestion des sites</title>
<table class='sortable' border="1">
<?php
    $resultat = odbc_exec($odbc, "SELECT Num_site, Nom_site, adr_site, tel_site, mail_site FROM Site;") or die (odbc_error());
	echo "
		<th class='donnees'>Nom</th>
		<th class='donnees'>Adresse</th>
		<th class='donnees'>Telephone</th>
		<th class='donnees'>Mail</th>
		<th class='donnees' colspan=2>Choix</th>";
    while ($donnees = odbc_fetch_array($resultat))
    {
		echo '<form method="post" action="gestion/site_mod.php">
		<input type="hidden" name="Num_site" value="' . $donnees['Num_site'] . '" />';
        echo "<tr><td value='nom_site'>";
        echo $donnees['Nom_site'];
        echo "</td>";
		echo "<td value='adr_site'>";
        echo $donnees['adr_site'];
        echo "</td>";
		echo "<td value='tel_site'>";
        echo $donnees['tel_site'];
        echo "</td>";
		echo "<td value='mail_site'>";
		echo $donnees['mail_site'];
		echo "</td>";
		echo "<td class='donnees'>";
		echo '<a href="'. $value['Modifier'].'" onclick="window.open(\'gestion/site_mod.php?Num_site='.$donnees['Num_site'].'\',\'\',\'toolbar=no,status=no,width=500,height=280,scrollbars=no,location=no,resize=no,menubar=no\');return false" title="Tranf&eacute;rer">Modifier</a> ';
		echo "</td>";
		echo "<td class='donnees'>";?>
		<a href="gestion/site_suppr.php?Num_site=<?php echo $donnees['Num_site']; ?>" onclick="return(confirm('Etes-vous sûr de vouloir supprimer cette entrée?'));">Supprimer</a>
		<?php
		echo "</td></tr>";
		echo '</form>';
    }
 ?>
</table>
<form action="gestion/site_ajout.php">
<?php echo '<a href="'. $value['Ajouter'].'" onclick="window.open(\'gestion/site_ajout.php\',\'\',\'toolbar=no,status=no,width=600,height=380,scrollbars=no,location=no,resize=no,menubar=no\');return false" title="Tranf&eacute;rer">Ajouter</a> '; ?>
</form>
<input onchange="toggleVisibility('col1')" type="checkbox" value="nom_site"/>
<input onchange="toggleVisibility('col2')" type="checkbox" value="tel_site"/>
<input onchange="toggleVisibility('col3')" type="checkbox" value="mail_site"/>

</html>
<script>
function toggleVisibility( id )
{
	var lmt = document.getElementById( id );
	if( lmt )
	{
		if( lmt.display = 'none' )
		{
			lmt.display = 'block';
		}
		else
		{
			lmt.display = 'none';
		}
	}
}
</script>

Malheuresement, ton script n'interragit pas avec le reste. (ca doit etre de ma faute :))

Merci de ton aide Dalida

Répondre à miguel

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

Dalida, le samedi 19 avril 2008 à 00:15:13

salut,

en fait c'est plus compliqué que je ne pensais !
je pensais l'appliquer à une <col>, mais comme une <col> ne contient rien, ça ne sert pas à grand chose !

après plusieurs heures de bournillage je te propose cette méthode.

ce qui m'embête le plus c'est de devoir parcourir toutes les cellules à chaque fois mais c'est le meilleur moyen que j'ai trouvé.

j'ai laissé les <tr> pour l'exemple mais tu peux leurs appliquer le même sort qu'aux <td> au lieu de modifier leur 'colspan'.

bien évidement ce serait trop beau si tout fonctionnait parfaitement, IE (pour changer nous casse les cou***es car il) ne reconnait pas 'table-cell' comme valeur de 'display' ; il lui faut 'block'.

il faudra donc ajouter un test pour savoir quelle valeur appliquer.
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

miguel, le lundi 21 avril 2008 à 11:32:42

Merci beaucoup.

C'est juste génial et comme je l'imaginais.

Je reviens si j'ai un soucis.

a+

Répondre à miguel

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

miguel, le lundi 21 avril 2008 à 11:44:19

Je n'ai pas compris l'histoire des <th>
et d'ailleurs, je n'arrive pas à les faire disparaitre.

Répondre à miguel

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

Dalida, le lundi 21 avril 2008 à 13:41:51

salut,

avec ça, ça devrait le faire :

var tds = document.getElementsByTagName( 'td' );
function setVisible( id , visible )
{
	var th = document.getElementById( 'th'+id );
	if( th )
	{
		var cn;
		if( visible )
		{
			for( var i = 0 ; i < tds.length ; i++ )
			{
				cn = String( tds[i].className );
				if( tds[i].className == id ) tds[i].style.display = 'table-cell';
			}
			th.style.display = 'table-cell';
		}
		else
		{
			for( var i = 0 ; i < tds.length ; i++ )
			{
				cn = String( tds[i].className );
				if( cn == id ) tds[i].style.display = 'none';
			}
			th.style.display = 'none';
		}
	}
}

[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

miguel, le lundi 21 avril 2008 à 13:59:23

yes c'est ça.

Merci beaucoup!

Répondre à miguel

1Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

Dalida, le lundi 21 avril 2008 à 14:12:42

je coche ton fil comme "résolu".

bon courage pour la suite et à plus !
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

Posez votre question Répondre