Question

我正在尝试更改PrimeFaces数据表中某些p：progressBar元素的颜色

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

使用以下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");
                    }
                }
            });
        </script>

这会获得正确的值，但当然它会更改数据表中所有进度条的颜色。但是，我想分别更改每个元素。我知道您可以通过分配自定义styleClass并将其放入js选择器

来更改单个元素

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

但我不明白如何为数据表中的元素执行此操作，而不是它们都具有相同的styleClass。我也尝试过使用

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

但这根本不会改变颜色。我使用的是PrimeFaces 6.2。

有人能指出我正确的方向吗？

使用javascript更改Primefaces数据表中单个元素的样式？

0 个答案: