javascript - How to modify jQuery progressbar color in ASP.net gridview? -

i have gridview column contains progressbar value. managed display progress each row i'm looking way alter color of progress bar based on column boolean value ( true/false ). if value true color becomes green. if value false color becomes red. i've manged alter single progress bar color haven't been able in gridview each row! boolean column status , progressbar value in progress.

thanks in advance!

gridview in asp:

updated:

<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:

updated:

  <script>     $(function () {          $('.pbcontainer').each(function () {              var val = parseint($(".value", this).text());             var status = $(".status", this).text();              var progresscolor = "orange";             var progressbackcolor = "lightyellow";             if (status == "false") {                 progresscolor = "red";                 console.log(progresscolor);             }             else {                 progresscolor = "green";                 console.log(progresscolor);             }              $('.progressbar', this).progressbar({ value: val });             $('.progressbar', this).css({ 'background': progressbackcolor });             $('.progressbar > div', this).css({ 'background': progresscolor });         });     });  </script> 

edit: i've updated code still color green! if statement not working ?!

in snippet value in hidden field same in span progress. rather use same value , make decision of coloring.

updated:

for e.g. have let 2 rows value true , false

<div class="progressbar"><span>70%</span></div> <div class="progressbar"><span>20%</span></div> <div class="status" style="visibility:hidden; height:0; width:0;">true</div> <div class="status" style="visibility:hidden; height:0; width:0;">false</div> 

now can read value in each item , color them accordingly.

   var progresscolorred = "red";     var progresscolorgreen = "green";     var progressbackcolor = "lightyellow";     var progresslate = true;   $('.progressbar').each(function(index, item) {         var progressvalue = $(".status").eq(index).text();         console.log(progressvalue);         if(progressvalue == "true")         {             $(item).css({ 'background': progressbackcolor });             $(item).css({ 'background': progresscolorgreen });         }         else         {             $(item).css({ 'background': progressbackcolor });             $(item).css({ 'background': progresscolorred });         }  }); 

here' fiddle demo of same