Cambiare colore ad una cella in base al suo valore

di
Gulpolo
il
9 risposte
G
Gulpolo
Pochi posts
Iscritto da
mag, 2023
Messaggi:
5

Cambiare colore ad una cella in base al suo valore

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
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

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

    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

    La tabella è la risultante di una query mysql cmq dovrebbe essere generata da uno script java…..

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

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

    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

    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
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

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

    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

    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
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

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

    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.

  • G
    Gulpolo
    Pochi posts
    Iscritto da
    mag, 2023
    Messaggi:
    5

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

    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
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3079

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

    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