Javascript 表中的进度条

我已经创建了一个表，它将回显数据。此表有一个进度部分，显示根据从数据库收集的数据完成的工作百分比

我遇到的问题是进度条。条形图本身并不适用于表中的每一行。它似乎只显示第一行的百分比

这是我的密码：

//页面加载时。。。
moveProgressBar（）；
//在浏览器上调整大小。。。
$（窗口）。调整大小（函数（）{
moveProgressBar（）；
});
//签名进度
函数moveProgressBar（）{
console.log（“moveProgressBar”）；
var getPercent=（$（'.progress wrap'）.data（'progress-percent'）/100）；
var getProgressWrapWidth=$（'.progress wrap'）.width（）；
var progressTotal=getPercent*getProgressWrapWidth；
var animationLength=2500；
//在页面加载时，将百分比栏设置为数据百分比长度的动画
//.stop（）用于防止动画排队
$（'.progress bar'）.stop（）.animate({
左：总计
}，动画长度）；
}

/

已完成=/*获取已完成*/；
total=/*获取total*/；
百分比=完成/总数；
bar=document.getElementById（'progress-bar progress'）//使用id而不是类
bar.style.width=百分比+“%”；
您需要将宽度分别应用于每一个。您正在选择所有这些选项，并将宽度设置为第一个选项的值


//选择进度条中的所有元素
$（“[数据进度百分比]”）
//在jQuery集合上循环
.每个（功能）{
//在迭代中获取当前的一个
var包装器=$（这个）；
//获取值
var width=wrapper.width（）；
var百分比=包装器数据（“进度百分比”）；
//确定钢筋的宽度
var barWidth=宽度*百分比/100；
//在当前包装器中查找要设置动画的元素
包装纸
.find（“.progress bar”）
.停止
.animate（{width:barWidth+“px”}，1000）；
});
。进度换行{
宽度：80%；
边框：2件纯黑；
边缘：1米；
}
.进度条{
高度：20px；
宽度：0px；
溢出：隐藏；
背景颜色：绿色；
}

代码片段不起作用，不清楚您希望出现什么行为。加载页面时，如何获取百分比数字？如果$（'.progressbar'）指的是几个条，为什么只有一个变量progressTotal？因为您需要分别处理每个变量。。。。这里没有批量操作
progressTotal
将是第一个element@epascarello你能提供一个这样的例子吗？
<script>
    completed = /*get completed*/;
    total = /*get total*/;
    percentage = completed / total;
    bar = document.getElementById('progress-bar progress'); //Use id and not class
    bar.style.width = percentage+"%";
</script>