Change style of single elements in Primefaces datatable with javascript?

Lotec Source

I am trying to change the color of some p:progressBar elements inside a PrimeFaces Datatable

<h:form id="form">
    <p:dataTable id="table" value="#{}">
            <h:outputText value="#{data.chapter}"/>
             <p:progressBar id="progress" value="#{bean.pb[]}"/>

using the following Javascript.

<script type="text/javascript">
            $(function () {
                for (i = 0; i &lt; 7; i++) {
                    var pb = PF('widget_form_table_' + i + '_progress');
                    var value = pb.getValue();
                    var rating = value / 25;

                    if (rating === 1) {
                        $(".ui-progressbar-value").css("background", "Tomato");
                    } else if (rating === 2) {
                        $(".ui-progressbar-value").css("background", "Orange");
                    } else if (rating === 3) {
                        $(".ui-progressbar-value").css("background", "DodgerBlue");
                    } else if (rating === 4) {
                        $(".ui-progressbar-value").css("background", "MediumSeaGreen");

This gets the right values, but of course it changes the color of all the progress bars in the datatable. However I would like to change every element separately. I know you can change a single element by assigning a custom styleClass and putting this in the js selector,

$(".myStyle .ui-progressbar-value")

but I don't understand how to do this for elements inside a datatable, without them all having the same styleClass. I also tried using

$("#form_table_" + i "_progress .ui-progressbar-value")

but this doesn't change the color at all. I'm using PrimeFaces 6.2.

Can someone point me in the right direction?



comments powered by Disqus