la mise en forme conditionnelle de html des cellules de tableau

Sont-il hors de la boîte solutions nécessaires à la mise en forme conditionnelle des tableaux HTML?

Avec une mise en forme conditionnelle, je suis plus intéressé à avoir des couleurs différentes comme arrière-plan de cellule en fonction de la valeur (numérique) ou à une autre colonne (dans la même table).

Quelque chose de semblable à ce que nous avons dans excel mise en forme Conditionnelle -> les Échelles de Couleur -> Rouge Jaune Vert. Je veux la mettre dans une table qui est généré dynamiquement via JSP.

Y a-JavaScript/jquery ou JSP solutions pour cela?

Avez-vous de l'exemple de mark-up pour le type de valeurs que vous vous attendez à voir?

OriginalL'auteur Salman A. Kagzi | 2011-02-21

http://jsfiddle.net/stofke/Ya68Q/

      $(function() {
            $('tr > td:odd').each(function(index) {
                var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]];
                var score = $(this).text();
                for (var i = 0; i < scale.length; i++) {
                    if (score <= scale[i][1]) {
                        $(this).addClass(scale[i][0]);
                    }
                }
            });
       });

solution la plus propre de tous. UPVOTED! 🙂

OriginalL'auteur Stofke

Mon premier prendre à ce sujet, compte tenu de la structure de table suivante:

<table>
    <col id="name" />
    <col id="score" />
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Allan, Paul</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Bartlett, James</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Callow, Simon</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Dennis, Mark</td>
            <td>19</td>
        </tr>
        <tr>
            <td>Ennals, Simon</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Finnegan, Seamus</td>
            <td>21</td>
        </tr>
    </tbody>
</table>

css:

table {
    width: 20em;
}

#score {
    width: 50%;
}

#name {
    width: 50%;
}

th {
    border-bottom: 2px solid #000;
    padding: 0.5em 0 0.1em 0;
    font-size: 1.2em;
}

td {
    border-bottom: 2px solid #ccc;
    padding: 0.5em 0 0.1em 0;
}

th:nth-child(even),
td:nth-child(even) {
    text-align: center;
}

.vGood {
    background-color: #0f0;
}

.good {
    background-color: #0c0;
}

.avg {
    background-color: #060;
}

.poor {
    background-color: #c00;
}

.vPoor {
    background-color: #f00;
}

et jQuery:

$('tbody tr td:not(":first")').each(

function() {
    var vGood = 30,
        good = 25,
        avg = 20,
        poor = 15,
        vPoor = 10,
        score = $(this).text();

    if (score >= vGood) {
        $(this).addClass('vGood');
    }
    else if (score < vGood && score >= good) {
        $(this).addClass('good');
    }
    else if (score <good && score >= avg) {
        $(this).addClass('avg');
    }
    else if (score < avg&& score >= poor) {
        $(this).addClass('poor');
    }
    else if (score < poor) {
        $(this).addClass('vPoor');
    }
    });

JS Fiddle démo.

C'est, bien sûr, une force brute approche. Ça va marcher, mais c'est pas le plus optimisé/approche efficace.

OriginalL'auteur David Thomas

1

Vous pouvez utiliser de css et de générer dynamiquement les noms de classe sur le backend... donc sur le backend, vous ajoutez class="level1" (ou "niveau2" ou "level3", etc), basé sur le calcul de la valeur de la cellule. Ensuite, vous pouvez contrôler l'affichage de ces classes, par simple css.

OriginalL'auteur user2733277

Vous pourriez mettre en place certaines classes css:

.row { background-color: #00ff00; }
.alt { backgorund-color: #ff00ff; }

<table>
    <tr class="row">
        <td>&lt;cell contents go here&gt;</td>
    </tr>
    <tr class="alt">
        <td>&lt;cell contents go here&gt;</td>
    </tr>
</table>

Le jquery option est aussi simple, mais c'est comment j'allais le faire honnêtement.

HTH

Veuillez prendre un coup d'oeil à ma réponse à Stofke

OriginalL'auteur Ortund

0

Maintenir les deux variables les plus élevées et les plus faibles valeurs de la table.

Ajouter une fonction qui est appelée à tout moment les changements de table. Itérer sur chaque cellule et de recalculer les valeurs maximale et minimale que nécessaire, puis avec une instruction if (ou quelque chose de similaire) réaffecter les couleurs correctes. Par exemple, pour chaque cellule:
```
if(cellValue < minValue)
    minValue = cellValue;
else if(cellValue > maxValue)
    maxValue = cellValue;

var bracket = (cellValue - minValue) / (maxValue - minValue);

if(bracket < .2)
    //make the cell green
else if(bracket < .4)
    //make the cell green-yellow
else if(bracket < .6)
    //make the cell yellow
```
...et ainsi de suite. C'est très à la force brute. Vous pouvez probablement trouver un moyen d'optimiser le processus de réaffectation des couleurs à des cellules existantes.

OriginalL'auteur zdyn
0

J'ai fait semblable à semblable à ce que ZDYN et David proposer, mais dans une plus mathématiquement prouvé.

Après ma dynamique les valeurs sont calculées je vais dans le calcul des percentiles pour les colonnes que je veux le code de couleur à l'aide de

(L/N)*100

où: L=> Nombre d'Éléments moins la valeur pour laquelle percentile est calculée

N => nombre Total d'éléments

Maintenant, selon le percentile-je obtenir de l'calculs ci-dessus, les couleurs appropriées sont attribuées pour une utilisation lors de l'affichage de la table.

Avec cette approche-je obtenir la flexibilité de l'utilisation de différentes palettes de couleurs à différents niveaux de granularité que le nécessaire.

Par exemple, je peux utiliser le Rouge pour la percentile allant de 0 à 5 ans dans un cas, et de 0 à 10 dans un autre. Toutes ces pièces peuvent être avec souplesse codé pour que toutes les étapes ci-dessus sont en fait @ backend. (en Java)

Pouvez-vous poster quelques bribes de votre code.

OriginalL'auteur Salman A. Kagzi

Vous devez vous connecter pour publier un commentaire.