Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2014
    Messaggi
    8

    Background cella in base a valore

    Buonasera, mi ritrovo con una tabella di punteggi a cui a mano cambio il background della cella per i primi tre classificati. Tramite file CSS è possibile definire il colore in base al contenuto della singola cella?

    Grazie per l'aiuto

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2014
    Messaggi
    8
    Ho risolto usando JQuery:

    Prerequisiti avere questo plugin in una cartella sul sito (richiamata nel primi <script>).

    Ho impostato questo stile nel file HTML.

    codice:
    <style type="text/css">
    .color {    
    }
    </style>

    Ho inserito il seguente script (sempre nello stesso file).

    codice:
    <script src="/plugin/jquery(nome in base alla versione scaricata).js"></script>
    <script>
        $(document).ready(function(){
        $('#table td.color').each(function(){
            var cellVal = parseInt($(this).text())
            if(cellVal == 100)
                $(this).css({"background-color":"#ffd700","font-weight":"bold"});
            else if(cellVal == 90)
                $(this).css({"background-color":"#C0C0C0","font-weight":"bold"});
            else if(cellVal == 85)
                $(this).css({"background-color":"#CD7F32","font-weight":"bold"});
        });
    });
    </script>

    E di conseguenza la tabella viene così:

    codice:
    <table id="table">
          <tr>
            <td>testo</td>
            <td>testo</td>
            <td class="color">punti</td>
            <td class="color">punti</td>
          </tr>
    </table>
    Riepilogando, la tabella deve avere l'id come nello script (table) e le righe in cui volete controllare la condizione per dare la formattazione adeguata devono avere la classe dello script (color, la stessa del CSS).

    Ultima modifica di lupet; 26-01-2015 a 12:34

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.