Cambiare colore ad una cella in base al suo valore

Gulpolo

il 02 mag 2023, 12:05

9 risposte

Gulpolo

Pochi posts

Iscritto da: mag, 2023

Messaggi:: 5

Cambiare colore ad una cella in base al suo valore

02 mag 2023, 12:11

Salve a tutti sono nuovo di questo forum e dopo averlo spulciato per bene non riesco a trovare una soluzione al mio quesitò(sicuramente facile per chi mastica tanto css).

Io ho una cella che ha un colore di sfondo diciamo verde e ho questo script------

:host{
color:white;background-color:green;

Questa cella indica una quantità di oggetti quando questa arriva a 0 vorrei che il background diventasse rosso…..non riesco a farlo cambiare in base al valore o tutti rossi o tutti verdi o nessun colore.

Come posso fare?devo lavorare sui child?

9 Risposte

Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Cambiare colore ad una cella in base al suo valore
02 mag 2023, 17:13
02/05/2023 - Gulpolo ha scritto:
Questa cella indica una quantità di oggetti quando questa arriva a 0 vorrei che il background diventasse rosso
Ma come viene generata la tabella? Da uno script in linguaggio JavaScript? Oppure con un linguaggio lato server?
G
Gulpolo
Pochi posts
Iscritto da
mag, 2023
Messaggi:
5
Re: Cambiare colore ad una cella in base al suo valore
02 mag 2023, 17:21
La tabella è la risultante di una query mysql cmq dovrebbe essere generata da uno script java…..
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Cambiare colore ad una cella in base al suo valore
02 mag 2023, 18:21
02/05/2023 - Gulpolo ha scritto:
La tabella è la risultante di una query mysql cmq dovrebbe essere generata da uno script java…..
In tal caso, è sufficiente che lo script Java attribuisca una classe di stile specifica alle celle che devono essere formattate in modo diverso.
G
Gulpolo
Pochi posts
Iscritto da
mag, 2023
Messaggi:
5
Re: Cambiare colore ad una cella in base al suo valore
02 mag 2023, 21:25
Quindi non posso usare il selettore universale host giusto? quindi devo assegnare che so la classe <td e dirgli come comportarsi se il valore e a zero rosso o diverso da 0 Verde ?
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Cambiare colore ad una cella in base al suo valore
03 mag 2023, 01:35
02/05/2023 - Gulpolo ha scritto:
Quindi non posso usare il selettore universale host giusto? quindi devo assegnare che so la classe <td e dirgli come comportarsi se il valore e a zero rosso o diverso da 0 Verde ?
Non capisco come quel selettore possa tornare utile in questo caso.
Definisci uno stile per la classe da attribuire alla cella che deve essere evidenziata con il colore rosso, e una per il colore verde, o viceversa.
Quando generi la tabella dei dati, applica alla cella <td> la classe relativa al colore che vuoi mostrare.
```
<style>
.positive {
  background-color: green;
}
.zero {
  background-color: red;
}
</style>
...
<table>
  <tr>
    <td class="positive">100</td>
    <td class="positive">999</td>
    <td class="zero">0</td>
    <td class="positive">1</td>
    ...
  </tr>
</table>
```
Ciao!
G
Gulpolo
Pochi posts
Iscritto da
mag, 2023
Messaggi:
5
Re: Cambiare colore ad una cella in base al suo valore
03 mag 2023, 13:23
Allora premetto che di css non ne capisco molto anche se non i sembra un linguaggio cosi complicato (hai un selettore ed una condizione),io sto utilizzando PHPrunner per creare una pagina dinamica di un database di uno store,funziona tutto alla perfezione l'unica richiesta che non riesco a soddisfare e quella di cambiare il colore alla cella delle quantità(rosso per i finiti e verdi gli altri)
Purtoppo l'unica cosa che riesco a fare in questo momento e impostare solo il colore di sfondo senza nessuna discriminante legate alla quantità,ho provato ad adattare il codice scritto da Alka ma non mi cambia nulla…….l'unica cosa che ha un influenza e la sintassi
:host{
color:white;background-color:green;
}
che mi fa lo sfondo di verde(o del colore che metto se lo cambio) ma non riesco ad fornirgli nessuna condizione da seguire per avere il cambio in base alla quantità.
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Cambiare colore ad una cella in base al suo valore
03 mag 2023, 13:27
03/05/2023 - Gulpolo ha scritto:
Purtoppo l'unica cosa che riesco a fare in questo momento e impostare solo il colore di sfondo senza nessuna discriminante legate alla quantità
Che posso aggiungere? Dopo aver messo un esempio di CSS, senza aver visto nulla del codice che genera la tabella, è inutile ribadire quanto scritto all'inizio o ripescare questo “host” (ma che avrà di così desiderabile da poter scrivere quello mentre il resto no??).
O aggiungi degli elementi che possano far capire come la tabella viene creata (cioè il codice), e come vai a inserire stili CSS al suo interno, oppure è inutile proseguire rimarcando ciò che è già stato detto da ambo le parti.

Gulpolo

Pochi posts

Iscritto da: mag, 2023

Messaggi:: 5

Re: Cambiare colore ad una cella in base al suo valore

03 mag 2023, 13:46

Non so se come codice intendi questo che è il css della pagina che viene generata e che devo modificare

[data-cellid="grid_footcell_field"][data-page="fz_product_list"][data-cellid="grid_footcell_field"][data-page="fz_product_list"][data-cellid="grid_footcell_field"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field1"][data-page="fz_product_list"][data-cellid="grid_footcell_field1"][data-page="fz_product_list"][data-cellid="grid_footcell_field1"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field2"][data-page="fz_product_list"][data-cellid="grid_footcell_field2"][data-page="fz_product_list"][data-cellid="grid_footcell_field2"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field3"][data-page="fz_product_list"][data-cellid="grid_footcell_field3"][data-page="fz_product_list"][data-cellid="grid_footcell_field3"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field4"][data-page="fz_product_list"][data-cellid="grid_footcell_field4"][data-page="fz_product_list"][data-cellid="grid_footcell_field4"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field5"][data-page="fz_product_list"][data-cellid="grid_footcell_field5"][data-page="fz_product_list"][data-cellid="grid_footcell_field5"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field6"][data-page="fz_product_list"][data-cellid="grid_footcell_field6"][data-page="fz_product_list"][data-cellid="grid_footcell_field6"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field7"][data-page="fz_product_list"][data-cellid="grid_footcell_field7"][data-page="fz_product_list"][data-cellid="grid_footcell_field7"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field8"][data-page="fz_product_list"][data-cellid="grid_footcell_field8"][data-page="fz_product_list"][data-cellid="grid_footcell_field8"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field9"][data-page="fz_product_list"][data-cellid="grid_footcell_field9"][data-page="fz_product_list"][data-cellid="grid_footcell_field9"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-cellid="grid_footcell_field10"][data-page="fz_product_list"][data-cellid="grid_footcell_field10"][data-page="fz_product_list"][data-cellid="grid_footcell_field10"][data-page="fz_product_list"] {
  white-space: nowrap;
}
[data-page="fz_product_list"][data-itemid="simple_grid_field3"] {
  background-color: #ff0000;
  color: #ffffff;
}

/* Put  your custom CSS code here */

[data-page="fz_product_list"][data-itemid="simple_grid_field4"]{
  color:white;background-color:green;

Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Cambiare colore ad una cella in base al suo valore
03 mag 2023, 14:39
03/05/2023 - Gulpolo ha scritto:
Non so se come codice intendi questo […]
Tu hai scritto questo:
“io sto utilizzando PHPrunner per creare una pagina dinamica di un database di uno store”
Suppongo quindi che il tutto venga generato da uno script PHP, pertanto sarà sufficiente modificare quello nel modo opportuno (sono generico, ma non conosco il tool né so come funziona).
03/05/2023 - Gulpolo ha scritto:
/* Put your custom CSS code here */ [data-page="fz_product_list"][data-itemid="simple_grid_field4"]{ color:white;background-color:green;
Se prendiamo la porzione di codice qui sopra, ciascuna cella sembra avere un ID univoco, quindi si potrebbe avere una clausola per lo sfondo di ogni cella da visualizzare in verde (o in rosso) in base all'attributo data-itemid.

Devi accedere o registrarti per scrivere nel forum

9 risposte