javascript - 使用类过滤多行并计算行以更改进度条

Question

大家好，我一直在做一个元素，一路上学习了一些 Bootstrap，但现在我真的需要你的帮助。当涉及到 jquery 时，我是一个完全的菜鸟，所以我将开始使用它:

我的 Fiddle将解释一切

1. 第一个问题是进度条，我需要它是动态的已经设置好表格，然后当标记为完成时，一行将上课:“成功”我想做的是取得进展条形图计算类“成功”的行数并显示到目前为止的进度如果 10 行中有 4 行成功，那么进度条应该阅读 40%。

这是我现在的进度条:

<div class="progress">
   <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70"    aria-valuemin="0" aria-valuemax="100" style="width:70%">70%</div>
</div>

1. 我需要能够对表格应用过滤器，但我也应该能够一次应用多个过滤器:示例将看到“区域 a”中的所有“支线任务”，但只能看到“未完成”的在“lvl 1 - 10”之间

我已经为每个过滤器菜单以及一些带有数据属性的菜单设置了类。

任何帮助都会很棒!

Answer 1

编辑:这是针对问题中第 1 点(进度条)的解决方案。

下面的 javascript 完成了进度条的工作，Demo here

在 html 中你应该以 0 开始进度条

var successRows = $(this).parents("tbody").children(".success").length;
var totalRows = $(this).parents("tbody").children("tr").length;
var progressPerc = ((successRows / totalRows) * 100) + "%";
$(".progress-bar").width(progressPerc).text(progressPerc);