Geek Answers Handbook

Dynamic progress bar coloring

I created a table with bootstrap execution styles, in which I have a dynamic table that has a Rank column that contains several values, starts from 1 to 100, and using jquery and bootstrap I convert the values ​​to a progress bar, as shown in the violin. The Th code is working fine, but the problem is with the color, it will now display everything in blue, in fact I want different colors based on the values ​​of the progress count, say 10 is yellow, 20 is blue, 35 - red, etc., Only the color of the duplicates should be repeated for the same value, otherwise a different color. color can be dynamic.

My code is below

Jsfiddle

$("#table").children("tbody").children("tr").each(function (i) {
    var col = $(this).children("td.value");
    console.log(col.html());
    var pro = '<div id="left"><div class="progress" id="percentage"><div class="progress-bar" style="display: block; float: right;width: ' + col.html() + '%;"></div></div></div><div id="right">&nbsp;' + col.html() + '</div>';
    col.html(pro);
});

Can someone tell me some solutions for this

+4
3

: http://jsfiddle.net/k1c9exLq/3/

100 , .

JQuery

var genCol = [];
for (var i=0; i<=100; i++)
    genCol.push('#'+(Math.random()*0xFFFFFF<<0).toString(16));

$("#table").children("tbody").children("tr").each(function (i) {
    var col = $(this).children("td.value");

    var pro = '<div id="left"><div class="progress" id="percentage"><div class="progress-bar" style="display:block; float:right; width:'+col.html()+ '%;background:'+genCol[col.html()]+'"></div></div></div><div id="right">&nbsp;' + col.html() + '</div>';

    col.html(pro);
});
+2

HTML

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
    Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
    Danger
  </div>
</div>

Bootstrap

0

You can use the operator ifin your jQuery code.

if(col > 10) { $('.progressbar').css('background', 'yellow'); }

Etc.

0
source

More articles:


All Articles