Javascript 使用HTML表格和CSS3显示项目状态

我想跟踪我的一些项目的状态，如下图所示：

活动1/2/3将从数据源获取一些数据，并包含startdate和enddate

我使用的表是用引导设置格式的。进度条形码（css、html、javascript）来自stackoverflow问题（感谢您的精彩帖子和回答）

然而，我无法根据收到的数据，将post中的表格和css结合起来显示进度条。任何帮助都将不胜感激

这是我试过的

$（函数（）{
$（'.progress>div'）。每个（函数（）{
$（this.css（'width'，$（this.data（'progress'））；
});
});
*{
框大小：边框框；
}
身体{
背景：白色；
}
.项目{
宽度：1000px；
边缘底部：1米；
}
.project>div{
显示：内联块；
边距：0-5px0；
垂直对齐：中间对齐；
}
.任务{
宽度：2米；
高度：2米；
边框：.4em实心#e4e7；
背景：#e4e7；
边界半径：100%；
}
.进展{
宽度：钙（50%-3em）；
高度：.6em；
填充：.2em 0；
背景：#e4e7；
位置：相对位置；
}
.progress>div{
高度：.2米；
左：-.4em；
右：-.4em；
位置：绝对位置；
}
.待定{
背景#F8AC59；
}
.跑步{
背景：#1C84C6；
}
.通过{
背景：#1AB394；
}
.失败{
背景#ED5565；
}

活动
一月十七日
二月十七日
三月十七日
四月十七日
5月17日
六月十七日
七月十七日
活动1
活动2
活动3
如果表格单元格的宽度始终相同，则可以这样做。它不是完美的，但会让你知道如何得到你想要的东西

对HTML的唯一更改是我在task divs上添加了
data length=“
。数字是任务将跨越的表列数


$（函数（）{
$（'.progress>div'）。每个（函数（）{
$（this.css（'width'，$（this.data（'progress'））；
});
});
*{
框大小：边框框；
}
身体{
背景：白色；
}
/*开始新添加的样式*/
/*绝对定位杆所需*/
运输署{
位置：相对位置；
}
/*需要使表列的大小相同*/
桌子{
表布局：固定；
}
/*将左侧圆置于表格单元格的中心*/
div[数据长度]{
左边缘：25%；
}
/*跨越栏*/
div[数据长度]：之前{
内容：“；
z指数：-1；
显示：块；
位置：绝对位置；
高度：8px；
最高：50%；
转换：翻译（0，-50%）；
}
/*跨越杆末端的圆*/
div[数据长度]：之后{
内容：“；
z指数：1；
显示：块；
位置：绝对位置；
最高：50%；
右：0；
转换：翻译（0，-50%）；
宽度：2米；
高度：2米；
边框：.4em实心#e4e7；
背景：#e4e7；
边界半径：100%；
}
/*已通过跨越栏的颜色样式*/
div.passed[数据长度]：之前{
背景：#1AB394；
边框顶部：2个实心#e4e7；
边框底部：2px实心#e4e7；
}
/*跨越栏末端圆圈的已传递颜色样式*/
div.passed[数据长度]：之后{
背景：#1AB394；
}
/*将跨越10个表列的栏*/
div[data length='10']：之前{
宽度：钙（900%+1米）；
}
/*10跨杆末端的圆*/
div[data length='10']：之后{
左：计算值（900%+2米）；
}
/*将跨越3个表列的栏*/
div[data length='3']：之前{
宽度：钙（200%+1米）；
}
/*3跨杆末端的圆*/
div[data length='3']：之后{
左：计算值（200%+2米）；
}
/*结束新添加的样式*/
.项目{
宽度：1000px；
边缘底部：1米；
}
.project>div{
显示：内联块；
边距：0-5px0；
垂直对齐：中间对齐；
}
.任务{
宽度：2米；
高度：2米；
边框：.4em实心#e4e7；
背景：#e4e7；
边界半径：100%；
}
.进展{
宽度：钙（50%-3em）；
高度：.6em；
填充：.2em 0；
背景：#e4e7；
位置：相对位置；
}
.progress>div{
高度：.2米；
左：-.4em；
右：-.4em；
位置：绝对位置；
}
.待定{
背景#F8AC59；
}
.跑步{
背景：#1C84C6；
}
.通过{
背景：#1AB394；
}
.失败{
背景#ED5565；
}

活动
一月十七日
二月十七日
三月十七日
四月十七日
5月17日
六月十七日
七月十七日
活动1
活动2