I am trying to set the color based on column status value ( Passed/Failed/InProgress) using jQuery.
I have copied the table and pasted in jsfiddle to try that and there is working. However, In the actual XHTML file, jQuery is not working.
.xhtml
<ui:composition template="/pages/layout.xhtml">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('tr > td.y_n').each(function() {
colsole.log("in function");
if ($(this).text() === "Passed") {
colsole.log("in if");
$(this).css('background-color', '#FF0000');
} else {
colsole.log("in if else");
$(this).css('background-color', '#3AC709');
}
});
});
</script>
<p:dataTable id="idExecution" var="varTS" value="#{executionBean.lstLiveSelectedSuiteData}" style="margin-bottom:20px">
<f:facet name="header"> Steps </f:facet>
<p:column headerText="Status" class="y_n" >
<h:outputText value="#{varTS.status}" />
</p:column>
<p:column headerText="Error Message">
<h:outputText value="#{varTS.errorMessage}" />
</p:column>
</p:dataTable>
</ui:composition>
Note: given HTML in the jsfiddle are copied runtime data. (xhtml > html)
I am expecting color change based on status column value