javascript - Modifying jQuery progressbar's color based on Gridview column -

i'm trying modify color of progressbar based on boloean value in each row in gridview (a boolean value) if value true color green , if value false color red. reason condition setting color not working!

thanks in advance:

asp gridview code:

<columns> <asp:templatefield>     <itemtemplate>         <%# container.dataitemindex + 1 %>     </itemtemplate> </asp:templatefield> <asp:boundfield datafield="progress" headertext="progress" sortexpression="progress" /> <asp:boundfield datafield="status" headertext="status" sortexpression="status" /> <asp:templatefield> <itemtemplate>    <div class="pbcontainer">       <div class="progressbar"><span><%# eval("progress") %>%</span></div>       <div class="value" style="visibility:hidden; height:0; width:0;"> <%#         eval("progress") %> </div>       <div class="status" style="visibility:hidden; height:0; width:0;"> <%# eval("status") %> </div>   </div> </itemtemplate> </asp:templatefield> </columns> 

script:

</style>  <link href="css/jquery-ui.css" rel="stylesheet" /> <script src="scripts/jquery-1.9.1.js"></script> <script src="scripts/jquery-ui-1.10.3%20.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script>     $(function () {         $('.pbcontainer').each(function () {             var val = parseint($(".value", this).text());             var status = $(".status", this).text();              var progresscolor = "orange";             var progressbackcolor = "lightyellow";              console.log(status);             if (status == "false") {                 progresscolor = "red";                 //console.log("condition met color red status flase");             }             else if (status == "true") {                 progresscolor = "green";                 //console.log(progresscolor);                 //console.log("condition not met color green status true");             }              $('.progressbar', this).progressbar({ value: val });             $('.progressbar', this).css({ 'background': progressbackcolor });             $('.progressbar > div', this).css({ 'background': progresscolor });         });     }); </script> 

because of white-space around status condition not true..

you need modify code trim white space this

 var status = $.trim( $(".status", this).text() ); 

check demo http://jsfiddle.net/axtcv/1/