Creare un filtro in base alle checkbox selezionate

C

carlo9987

Utente Attivo
5 Mar 2013
35
0
0
Roma
Ciao a tutti! Ho bisogno subito del vostro aiuto!! :dipser:

Ho una pagina PHP che mi restituisce in una tabella il risultato di una query. Questa tabella è di 5 colonne e la genero con il seguente codice:

PHP: 
$query = mssql_query("Select * from tabella");
				
while($row = mssql_fetch_array($query)){
	echo "<tr><td>";
	echo $row['campo1'] . "</td><td>" . $row['campo2'] . "</td><td>" .  $row['campo3'] . "</td><td>" .  $row['campo4'] . "</td><td>" .  $row['campo5'] . ""; 
	echo "</td></tr>";
}

Quello che vorrei realizzare è una specie di filtro che funziona mediante la selezione di alcune checkbox, ovvero, ad inizio pagina vorrei inserire tutti i valori esistenti delle varie colonne ad esempio così:

PHP: 
echo "<fieldset>";
				
while($row2 = mssql_fetch_array($query_Campo1)){
       echo "<input type='checkbox' name='chkCampo1' value='" . $row["Campo1"] . "'> " . $row2['Campo1'] . "</option></br>";
}
				
echo "</fieldset>";

Ed in base alle checkbox deselezionate far sparire le righe dalla tabella.

E' possibile realizzare una cosa del genere?? Qualcuno potrebbe darmi qualche suggerimento??

Vi ringrazio in aticicpo!
 
Ultima modifica di un moderatore:
Ciao, guarda questo esempio
HTML: 
<script>
    function mostra(colonna,check) {      
        
        var td = document.getElementById(colonna);
        if(check === false)
            td.style.display = "none";
        else
            td.style.display = "block";
    }

</script>
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col1"/>Colonna 1
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col2"/>Colonna 2
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col3"/>Colonna 3
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col4"/>Colonna 4
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col5"/>Colonna 5
<br/><br/>
<table border="1">
    <tr>
        <td id="col1">valore 1</td>
        <td id="col2">valore 2</td>
        <td id="col3">valore 3</td>
        <td id="col4">valore 4</td>
        <td id="col5">valore 5</td>
    </tr>
</table>

PS:
questa riga è sbagliata : apri un input e chiudi un option
PHP: 
echo "<input type='checkbox' name='chkCampo1' value='" . $row["Campo1"] . "'> " . $row2['Campo1'] . "</option></br>";
 
criric ha scritto:
Ciao, guarda questo esempio
HTML: 
<script>
    function mostra(colonna,check) {      
        
        var td = document.getElementById(colonna);
        if(check === false)
            td.style.display = "none";
        else
            td.style.display = "block";
    }

</script>
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col1"/>Colonna 1
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col2"/>Colonna 2
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col3"/>Colonna 3
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col4"/>Colonna 4
<input onclick="mostra(this.attributes['name'].value,this.checked)" type="checkbox" checked name="col5"/>Colonna 5
<br/><br/>
<table border="1">
    <tr>
        <td id="col1">valore 1</td>
        <td id="col2">valore 2</td>
        <td id="col3">valore 3</td>
        <td id="col4">valore 4</td>
        <td id="col5">valore 5</td>
    </tr>
</table>

PS:
questa riga è sbagliata : apri un input e chiudi un option
PHP: 
echo "<input type='checkbox' name='chkCampo1' value='" . $row["Campo1"] . "'> " . $row2['Campo1'] . "</option></br>";
Clicca per allargare...

Prima di tutto ti ringrazio per la risposta! Prima di provare la soluzione da te postata però avrei bisogno di alcune delucidazioni, in quanto se inserisco delle parti di codice javascript sembrerebbe non funzionare!!

Questa è la prima parte di codice, dove dovrei inserirlo?? Scusami la domanda ma parto proprio dalle basi!! :)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TITLE</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
	<script>
			
		$(function() {
			$( "#startDate" ).datepicker({
				dateFormat: 'dd-mm-yy'
			});
			$( "#endDate" ).datepicker({
				dateFormat: 'dd-mm-yy' 
			});			
		});				
	</SCRIPT>
	
</head>

<body bgcolor="#DDDDDD">

....
 
la funzione la metti tra i tag script e /script insieme a quella di jquery
HTML: 
<script>			
    $(document).ready(function() {
        $( "#startDate" ).datepicker({
            dateFormat: 'dd-mm-yy'
        });
        $( "#endDate" ).datepicker({
            dateFormat: 'dd-mm-yy' 
			
        });			
    });
    function mostra(colonna,check) {      
        
        var td = document.getElementById(colonna);
        if(check === false)
            td.style.display = "none";
        else
            td.style.display = "block";
    }
</script>
 
Perdonami ma parto proprio da 0!! Utilizzando il mio caso reale:

CHECKBOX

PHP: 
echo "<fieldset style='font-family: Tahoma' id='fieldTipo'>";
				
while($row2 = mssql_fetch_array($query_Tipo)){
	echo "<input type='checkbox' name='chkTipo' value='" . $row["Tipo"] . "'>" . $row2['Tipo'] . "</br>";
}
		
echo "</fieldset>";

Quindi ad esempio:

[X] auto
[ ] scooter


TABELLA

TIPO | PROVINCIA
----------------------------
auto | RM
scooter | BO <------ Nascondere
auto | CT
scooter | BA <------ Nascondere

PHP: 
while($row = mssql_fetch_array($query)){
        echo "<tr style='font-family: Tahoma'>";
	echo "<td>" . $row['Tipo'] . "</td><td>" . $row['Provincia'] . "</td>"; 
        echo "</tr>";
}

Come andrebbe generato il codice?? Ho preferito dettagliare di più perchè altrimenti mi perdo :D

Grazie mille in anticipo!!
 
mi avevi parlato di colonne non di righe
cmq meglio fare una query per le check e una per i risultati
visto che includi gia jquery conviene sfruttarlo
testato in locale su FF e funzionante
PHP: 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
    $(document).ready(function(){
        $("input:checkbox").change(function(){            
            if($(this).is(':checked')) {
                $("." + $(this).val()).show();
            } else {
                $("." + $(this).val()).hide();
            }
        })
    })
    
</script>
<?php
include 'test/connessione.php';

$query = mysqli_query($conn, "select Tipo from tabela GROUP BY Tipo");
echo "<fieldset>";
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    echo "<input checked type='checkbox' name='ck' value='" . $row['Tipo'] . "'> " . $row['Tipo'] . "</option>";
}
echo "</fieldset>";

$query = mysqli_query($conn, "select * from tabela");
echo "<table>";
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    echo "<tr class='" . $row['Tipo'] . "'>";
    echo "<td>" . $row['Tipo'] . "</td>";
    echo "<td>" . $row['Provincia'] . "</td>";
    echo "</tr>";
}
echo "</table>";
?>
dovrai adattarlo al tuo database
non ho commentato se non capisci qualcosa chiedi pure
 
criric ha scritto:
mi avevi parlato di colonne non di righe
cmq meglio fare una query per le check e una per i risultati
visto che includi gia jquery conviene sfruttarlo
testato in locale su FF e funzionante
PHP: 
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
    $(document).ready(function(){
        $("input:checkbox").change(function(){            
            if($(this).is(':checked')) {
                $("." + $(this).val()).show();
            } else {
                $("." + $(this).val()).hide();
            }
        })
    })
    
</script>
<?php
include 'test/connessione.php';

$query = mysqli_query($conn, "select Tipo from tabela GROUP BY Tipo");
echo "<fieldset>";
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    echo "<input checked type='checkbox' name='ck' value='" . $row['Tipo'] . "'> " . $row['Tipo'] . "</option>";
}
echo "</fieldset>";

$query = mysqli_query($conn, "select * from tabela");
echo "<table>";
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
    echo "<tr class='" . $row['Tipo'] . "'>";
    echo "<td>" . $row['Tipo'] . "</td>";
    echo "<td>" . $row['Provincia'] . "</td>";
    echo "</tr>";
}
echo "</table>";
?>
dovrai adattarlo al tuo database
non ho commentato se non capisci qualcosa chiedi pure
Clicca per allargare...

Ciao, ti ringrazio davvero per la disponibilità!!

Ho provato a riadattare la soluzione che hai postato tu, ma nulla...
 
Ti aggiungo l'errore che mi riporta chrome:

Uncaught Error: Syntax error, unrecognized expression: .

Effettivamente quello che volevo chiederti è proprio il significato di questa parte di codice:

Codice: 
$("." + $(this).val()).show();

Con "." cosa stiamo indicando??

Grazie mille!
 
Con "." cosa stiamo indicando??
Clicca per allargare...
con il . si indica la classe
quindi ci riferiamo a tutte le tr che hanno il nome dellla classe uguale al valore della checkbox cliccata

per l'errore non l'ho mai visto...
 
criric ha scritto:
con il . si indica la classe
quindi ci riferiamo a tutte le tr che hanno il nome dellla classe uguale al valore della checkbox cliccata

per l'errore non l'ho mai visto...
Clicca per allargare...

Ok, l'errore non c'è più, avevo sbagliato io una cosa.... però non funziona ancora. Ti faccio vedere come l'ho riadattato:

PHP: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>-----</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script>
		
	$(document).ready(function(){ 
       	       $("input:checkbox").change(function(){             
                     if($(this).is(':checked')){ 
              	           $("." + $(this).val()).show();  
      	             }else{ 
               	           $("." + $(this).val()).hide();  
                     } 
               }) 
    	})
		 	
</script>
	
</head>
<body>
$query_ISF = mssql_query("select distinct ISF from contatti where userId = 10");
				
echo "<fieldset style='font-family: Tahoma' id='fieldISF'>";
				
while($rowISF = mssql_fetch_array($query_ISF)){
	echo "<input checked type='checkbox' name='ck' value='" . $rowISF["ISF"] . "'>" . $rowISF['ISF'] . "</br>";
}
				
echo "</fieldset>";

$query = mssql_query("select ISF, Provincia from contatti where userId = 10 GROUP BY ISF, Provincia");
				
while($rowResult = mssql_fetch_array($query)){
	echo "<tr class='" . $rowResult['ISF'] . "' style='font-family: Tahoma'>";
	echo "<td>" . $rowResult['ISF'] . "</td><td>" . $rowResult['Provincia'] . "</td>"; 
        echo "</tr>";
}

</body>
 
hai dimenticato i tag php nel body <?php e ?>
per il resto mi sembra a posto Cosa non funziona? al massimo metti degli alert() nella funzione javascript per vedere se e dove si blocca
HTML: 
$(document).ready(function(){ 
            alert("caricamento pagina");
            $("input:checkbox").change(function(){  
                alert("cliccato");
                if($(this).is(':checked')){ 
                    $("." + $(this).val()).show();  
                    alert("selezionato");
                }else{ 
                    $("." + $(this).val()).hide();  
                    alert("deselezionato");
                } 
            }) 
        })
 
Si si i tag del php ci sono, li ho saltati copiando ed incollando. :) Comunque gli alert compaiono in maniera corretta, però le occorrenze in tabella rimangono dove sono.. :dipser:
 
Allora, finalmente sono riuscito a risolvere!! Condivido il codice, magari può essere di aiuto per qualcuno:

Codice: 
$(document).ready(function(){ 
      $("input:checkbox").change(function(){  
          if($(this).is(':checked')){
		var value = $(this).val();
		value = value.replace(" ", ".");
                ($("tr." + value)).show(); 
          }else{ 
	        var value = $(this).val();
		value = value.replace(" ", ".");
                ($("tr." + value)).hide(); 
          } 
     }) 
})

In pratica il problema era che l'elemento da nascondere andava passato nel seguente modo:

tr.NOME.COGNOME

Quindi ho fatto una replace dello spazio con un punto ed ho concatenato il tr..

Criric grazie mille per la disponibilità! :fonzie: :byebye:
 
Ciao a tutti!!

Ho la necessità di riprendere la discussione in quanto mi sono accorto di un problema. Con il codice da me utilizzato, quando andiamo a deselezionare e riselezionare una checkbox, automaticamente mi rende visibili gli elementi nascosti dalla deselezione delle checkbox presenti negli altri frame.

Ad esempio se dovessi filtrare per nome (quindi dal frame con le checkbox dei nomi), e poi andare a filtrare per provincia (quindi dal frame con le checkbox delle provincie), ad la riselezione della provincia appena esclusa comporta la ricomparsa di tutte le occorrenze precedentemente nascoste dalla deselezione del nome.

Anche se contorto spero di aver reso l'idea :)

Ricapitolando, questo è il codice jquery attualmente utilizzato:

Codice: 
$(document).ready(function(){ 	
	$("input:checkbox").change(function(){  
		if($(this).is(':checked')){
			var value = $(this).val();
			value = value.split('.').join('');
			value = value.split(' ').join('');
			($("tr." + value)).show();		
		}else{ 					
			var value = $(this).val();
			value = value.split('.').join('');
			value = value.split(' ').join('');
			($("tr." + value)).hide();
		}
	})
});

Questo è il codice utilizzato per la creazione delle checkbox:

PHP: 
echo "<td style='width:33%;height:150px'><div style='overflow:scroll; width:100%; height:100%'>";
echo "<fieldset style='font-family: Tahoma' id='fieldISF'>";
				
sort($arrayNomi);
				
foreach(array_unique($arrayNomi) as $nomi){
	echo "<input checked type='checkbox' name='ck' id='chkNomi' value='" . str_replace(" ","",$nomi) . "'>" . $nomi . "</br>";
}
echo "</fieldset>";
				
echo "</div></td>";
	
#-------------------------QUERY estrazione Province			
echo "<td style='width:12%;height:150px'><div style='overflow:scroll; width:100%; height:100%'>";
				
sort($arrayProvince);
				
echo "<fieldset style='font-family: Tahoma' id='fieldProvince'>";	

foreach(array_unique($arrayProvince) as $province){
	echo "<input checked type='checkbox' name='ck' id='chkProvince' value='" . str_replace(NULL,"N.D.",$province) . "'> " . str_replace(NULL,"N.D.",$province) . "</br>";
}
echo "</fieldset>";
				
echo "</div></td>";

Questo invece è quello delle tr:

PHP: 
echo "<tr class='" . str_replace(" ","",$nomeOld) . " " . $provinciaOld . " " . str_replace(".","",$categoriaOld) . " " . str_replace(" ","",str_replace(".","",$ambOld)) . " " . str_replace(".","",$specOld) . "' style='font-family: Tahoma'>";

...

echo "</tr>";

Vi ringrazio in anticipo!!

Carlo
 
Qualcuno può aiutarmi??? :dipser:

carlo9987 ha scritto:
Ciao a tutti!!

Ho la necessità di riprendere la discussione in quanto mi sono accorto di un problema. Con il codice da me utilizzato, quando andiamo a deselezionare e riselezionare una checkbox, automaticamente mi rende visibili gli elementi nascosti dalla deselezione delle checkbox presenti negli altri frame.

Ad esempio se dovessi filtrare per nome (quindi dal frame con le checkbox dei nomi), e poi andare a filtrare per provincia (quindi dal frame con le checkbox delle provincie), ad la riselezione della provincia appena esclusa comporta la ricomparsa di tutte le occorrenze precedentemente nascoste dalla deselezione del nome.

Anche se contorto spero di aver reso l'idea :)

Ricapitolando, questo è il codice jquery attualmente utilizzato:

Codice: 
$(document).ready(function(){ 	
	$("input:checkbox").change(function(){  
		if($(this).is(':checked')){
			var value = $(this).val();
			value = value.split('.').join('');
			value = value.split(' ').join('');
			($("tr." + value)).show();		
		}else{ 					
			var value = $(this).val();
			value = value.split('.').join('');
			value = value.split(' ').join('');
			($("tr." + value)).hide();
		}
	})
});

Questo è il codice utilizzato per la creazione delle checkbox:

PHP: 
echo "<td style='width:33%;height:150px'><div style='overflow:scroll; width:100%; height:100%'>";
echo "<fieldset style='font-family: Tahoma' id='fieldISF'>";
				
sort($arrayNomi);
				
foreach(array_unique($arrayNomi) as $nomi){
	echo "<input checked type='checkbox' name='ck' id='chkNomi' value='" . str_replace(" ","",$nomi) . "'>" . $nomi . "</br>";
}
echo "</fieldset>";
				
echo "</div></td>";
	
#-------------------------QUERY estrazione Province			
echo "<td style='width:12%;height:150px'><div style='overflow:scroll; width:100%; height:100%'>";
				
sort($arrayProvince);
				
echo "<fieldset style='font-family: Tahoma' id='fieldProvince'>";	

foreach(array_unique($arrayProvince) as $province){
	echo "<input checked type='checkbox' name='ck' id='chkProvince' value='" . str_replace(NULL,"N.D.",$province) . "'> " . str_replace(NULL,"N.D.",$province) . "</br>";
}
echo "</fieldset>";
				
echo "</div></td>";

Questo invece è quello delle tr:

PHP: 
echo "<tr class='" . str_replace(" ","",$nomeOld) . " " . $provinciaOld . " " . str_replace(".","",$categoriaOld) . " " . str_replace(" ","",str_replace(".","",$ambOld)) . " " . str_replace(".","",$specOld) . "' style='font-family: Tahoma'>";

...

echo "</tr>";

Vi ringrazio in anticipo!!

Carlo
Clicca per allargare...
 
Sono riuscito a risolvere, probabilmente non è una soluzione pulita ma funzionalmente fa il suo dovere! :)

Posto il codice, potrebbe tornare utile a qualcuno:

Codice: 
if($(this).is(':checked')){
	var value = $(this).val();
	value = value.split('.').join('');
	value = value.split(' ').join('');
	arrayShow.push(value);
	var index = arrayHide.indexOf(value);
	arrayHide.splice(index,1);					
}else{ 					
	var value = $(this).val();
	value = value.split('.').join('');
	value = value.split(' ').join('');
	arrayHide.push(value);
	var index = arrayShow.indexOf(value);
	arrayShow.splice(index,1);
}
$.each(arrayShow, function(key, valueShow) {
        ($("tr." + valueShow)).show();
});
$.each(arrayHide, function(key, valueHide) {
        ($("tr." + valueHide)).hide();
});

Ciao ciaoo :byebye:
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

sandropochi
[PHP] Form per creare filtro di ricerca su DB
Risposte
8
Visite
10K
PHP
sandropochi
sandropochi
J
Creare un filtro
Risposte
24
Visite
8K
Javascript
james81
J
S
Creare un bollettino postale in html o altro linguaggio
Risposte
2
Visite
2K
HTML e CSS
salvo_76
S
F
Salve a tutti, devo creare un sito web/gioco online dove cliccando il tasto 'Inizia' del form viene estratta una capitale casualmente dal
Risposte
0
Visite
1K
PHP
faccone
F
C
Come ricreare questo calcolatore di prezzi a step con woocommerce?
Risposte
0
Visite
2K
WordPress
calmabubbasst
C
E
Creare un testo trasparente dietro un div
Risposte
5
Visite
3K
HTML e CSS
WmbertSea
WmbertSea
M
Creare traccia di download file sul server
Risposte
2
Visite
2K
HTML e CSS
Morgy
M
A
Cerco programmatore/sviluppatore per creare forum
Risposte
3
Visite
5K
Offerte e Richieste di Lavoro e/o Collaborazione
Riminese
R
L
Creare ancore interne alla pagina
Risposte
1
Visite
1K
PHP
WmbertSea
WmbertSea
I
Creare un banner temporaneo JavaScript
Risposte
0
Visite
1K
Javascript
IlTizioScriptato
I
C
Creare Tabella Dati Meteo prelevandoli da dei Tags in un altro foglio
Risposte
27
Visite
3K
PHP
Cavaliere
C
simgia
Cordova errore quando cerco di emulare o creare la app
Risposte
2
Visite
3K
Sviluppo app per Android
simgia
simgia
U
PHP creare un file excel dopo ricerca nel DB
Risposte
0
Visite
1K
PHP
Umberto Federico
U
A
Creare un cronometro
Risposte
5
Visite
2K
PHP
otto9due
otto9due
G
[PHP] Creare script di prenotazione con controllo disponibilità.
Risposte
7
Visite
4K
PHP
Rikk73
Rikk73
F
Ricreare struttura php+mysql su Xampp
Risposte
0
Visite
6K
Apache
francescoITA
F
F
Creare elementi html con javascript
Risposte
3
Visite
3K
Javascript
McLeanerGla
M
Shyson
Modificare codice e creare link
Risposte
0
Visite
909
PHP
Shyson
Shyson
Cosina
Creare bottone delete in form upload
Risposte
5
Visite
2K
PHP
princebhaini8
P
Cosina
  • Bloccata
Creare bottone delete in form upload
Risposte
1
Visite
1K
PHP
Max 1
Max 1
Alto Basso