Question

我创建了一个带有引导进度样式的表，其中我有一个动态表，其中包含一个名为Rank的列，其中包含从1到100开始的几个值，并使用jquery和bootstrap将值转换为进度酒吧就像小提琴一样。 Th代码工作正常，但问题是颜色，目前它将显示全部为蓝色，实际上我想要基于进度计数值的不同颜色说10 - 黄色，20蓝色，35 - 红色等，重复颜色应该只发生对于相同的值，否则颜色不同。颜色可以是动态的

我的代码如下所示

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);
});

任何人都可以告诉我一些解决方案吗

Answer 1

检查此演示：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);
});

Answer 2

Click Here

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

Answer 3

您可以在Jquery代码中使用if语句。

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

等等。

进度条的动态着色

3 个答案:

检查此演示：http://jsfiddle.net/k1c9exLq/3/

JQUERY

HTML