Buenas tardes,
He creado unos filtros para una búsqueda, de tal manera que el usuario entra y puede seleccionar el país con un select desplegable donde aparecen los distintos paises y así para varias cosas como categoría, año, color, etc. Una vez que he conseguido los filtros y recibir la opción que marca el usuario para luego buscar en la base de datos con la entrada del usuario, quiero ponerlo más bonito, que no sea un simple select para todo, sino cambiar algunos. De tal manera que para los años he creado un slider el cual funciona perfectamente y ahora para los colores quería crear una tabla de colores para sustituir el select, de tal manera que el usuario pueda marcar la casilla del color q vea y yo poder saber qué casilla ha marcado.
Lo primero que se me ocurrió, es pensar en extrapolar el select a la tabla es decir, el <select> es a <table> como el <option> del select puede ser a <td> de la tabla , pero nada no me funcionó, este es el código inicial q tenía cuando buscaba el color con el select y el cual funciona perfectamente:
Código PHP:
Ver originalif (isset ($_POST['ColorInput'])) { $ColorInput = $_POST['ColorInput'];
if ($ColorInput !=''){
if($DataFilter!="") {
$DataFilter .= " AND ";
}
$DataFilter .= "Body_colorgroup_id = " . $ColorInput ." ";
}
} else {
$ColorInput = '';
}
Este if comprueba si el usuario ha seleccionado algún color y si es asi busca en la base de datos usando la variable $DataFilter
Y esta segunda parte, aparte de recoger el color marcado por el usuario lo mantiene en pantalla a pesar de que se recargue la página, de tal manera que cuando se muestren los resultados se muestre tb el color q se seleccionó y no se quede vacío el select.
Código PHP:
Ver original<label for="ColorInput"><?php echo $arrMainPage[$MainPageColor]["TextHeader"]; ?></label>
<select name="ColorInput">
<option></option>
<?php
$rcscolor = $cardata->query($qrycolor);
while ($row = $rcscolor->fetch_array(MYSQLI_BOTH)) {
if ($row["body_colorgroup_id"] == $ColorInput) {
$ColorSelected = "selected";
} else {
$ColorSelected = "";
}
?><Option <?php echo $ColorSelected; ?> value="<?php echo $row["body_colorgroup_id"]; ?>"><?php echo $row["colorDescription"]; ?></option>
<?php
}
echo "</select>"
?>
</select>
Bien, una vez visto que me funcionaba al igual q con otros filtros, he querido ponerlo más bonito como he dicho, y lo primero que hice es lo q he contado simplemente cambiar table por select y option por td, aparte de construir la tabla. Este código no me funcionaba así q no lo posteo más q nada porque ya lo he ido mejorando y no lo tengo tal cual. Ademas no sé si será una burrada lo q intenté pero para mi tiene mucha lógica, ya que una tabla es un menu al igual q el select simplemente q lo muestra en celdas directamente sin ser desplegable, pero bueno, no funciona o no he sabido hacer que funcione.
Luego he usado
que se supone que es para opciones ocultas al usuario pero no lo pillo muy bien y no sé si me sirve para lo busco, tampoco he conseguido que funcione.
Por último tengo un script que doy la sensación de que se marca la celda, por lo menos el usuario ya sabe que está la celda marcada, pero ahora no sé cómo recoger la celda q ha marcado. el script q he usado es este:
Código Javascript
:
Ver original<script type="text/javascript">
var cell = null;
function press(obj) {
obj.style.border = '1px solid #46FB04';
//obj.style.background = 'rgba(70,251,4,0.1)';
//.trans{ background:rgba(255,255,255,0.6);}
if (cell != null && cell != obj)
cell.style.border = '';
cell = obj;
}
</script>
Lo he intentado con background pero no consigo q se vea el color marcado asi q lo mejor es cambiar el borde un poco, lo he kerido poner más grueso el borde con más px pero me cambiar el tamaño de las celdas haciendo estás irregulares, así q lo he dejado en 1px, q aunq no se nota mucho pero bueno, lo más importante es poder coger el background para asi tener el color q ha marcado.
El código final que tengo es este:
Código PHP:
Ver original<label for="ColorInput"><?php echo $arrMainPage[$MainPageColor]["TextHeader"]; ?></label>
<table name="ColorInput" id="ColorsTable" >
<?php
$arrcolorDescription = array();
$rcscolor = $cardata->query($qrycolor);
while ($row = $rcscolor->fetch_array(MYSQLI_BOTH)) {
switch ($row["StructurePK"]) {
case 'Color';
$arrColor[] = $row;
break;
}
if ($row["body_colorgroup_id"] == $ColorInput) {
$ColorSelected = "selected";
} else {
$ColorSelected = "";
}
}
?>
<tr>
<?php
$intCount = 1;
$intHalf = count($arrColor)/2;
foreach ($arrColor as $Color => $valueArray){
?> <td onclick="press(this)" type="hidden" name="ColorInput" <?php echo $ColorSelected; ?> value="<?php echo $row["body_colorgroup_id"]; ?>" class="<?php echo $valueArray["ClassColor"]; ?>" title="<?php echo $valueArray["colorDescription"]; ?>"> </td>
<?php
if ($intCount >= $intHalf) {
?>
</tr>
<tr>
<?php $intHalf = $intHalf*2;
}
$intCount++;
}
?> </tr>
</table>
Me marca la celda con el evento onclick y el script q he puesto más arriba, pero no me recoge la información.
Si alguien se le ocurre algo, estaría muy agradecido.
Muchas gracias.
Saludos.