Posez votre question Signaler

Checkbox -> Tableau -> Javascript ou php [Résolu]

miguel - Dernière réponse le 21 avril 2008 à 14:12
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.
Lire la suite 

Checkbox -> Tableau -> Javascript ou php »

8 réponses
Réponse
+1
moins plus
Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 17 avril 2008 à 19:58
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';
		}
	}
}

 Ajouter un commentaire - Site web
miguel - 18 avril 2008 à 09:02
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
Ajouter un commentaire
Réponse
+1
moins plus
Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 19 avril 2008 à 00:15
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.

Ajouter un commentaire - Site web
miguel - 21 avril 2008 à 11:32
Merci beaucoup.

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

Je reviens si j'ai un soucis.

a+
miguel - 21 avril 2008 à 11:44
Je n'ai pas compris l'histoire des <th>
et d'ailleurs, je n'arrive pas à les faire disparaitre.
Ajouter un commentaire
Réponse
+1
moins plus
Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 21 avril 2008 à 13:41
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';
		}
	}
}

Ajouter un commentaire - Site web
miguel - 21 avril 2008 à 13:59
yes c'est ça.

Merci beaucoup!
Ajouter un commentaire
Réponse
+0
moins plus
Dalida 6694Messages postés 3 mars 2007Date d'inscription 16 janvier 2011Dernière intervention 21 avril 2008 à 14:12
je coche ton fil comme "résolu".

bon courage pour la suite et à plus !

Ajouter un commentaire - Site web
Ajouter un commentaire
Posez votre question
Ce document intitulé « Checkbox -> Tableau -> Javascript ou php » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?