Javascript 无法在表行上循环以设置相应进度条的动画

好的，为了简洁起见，我只包括javascript代码本身。如果真的需要HTML或CSS，我会更新帖子

目标：我有一个包含行（显示任务）的表，在每个任务的右侧有一个进度条，显示经过了多少时间

问题是：只有第一个进度条起作用。所有后续进度条只显示一个完全填满的进度条。在查看控制台日志时，程序根本没有循环。除第一行外，它不执行任何其他行的计算。我尝试在循环内外移动各种变量，但没有成功

如果代码看起来很糟糕和/或答案显而易见，请原谅我。这基本上是我第一个真正的javascript“程序”

var Table = document.getElementsByTagName("table");
var Row = document.getElementsByTagName("tr");
var rowDisplay = document.getElementsByTagName("td");

function fillBar(timeElapsedPercent) {

    for (i = 0; i < rowDisplay.length; i++) {

        var eachRow = rowDisplay.item(i);
        const interval = setInterval(() => {

            // Grabbing the needed info from the cells
            var taskName = rowDisplay[0].innerText;
            var rawDeadline = rowDisplay[1].innerText;
            var rawStartTime = rowDisplay[2].innerText;

            var bar = document.querySelector('.bar');

            //calculations for the progress bar
            var now = new Date();
            var startTime = new Date(rawStartTime.replace(/(am|pm)/, ''));
            var deadline = new Date(rawDeadline.replace(/(am|pm)/, ''));
            var timeTotal = Math.abs(deadline - startTime);
            var timeTotalPercent = Math.abs(timeTotal / 60000);
            console.log('value for total time in minutes of', taskName, 'is', timeTotalPercent);
            var nowTillDeadline = Math.abs(deadline - now);
            var nowTillDeadlinePercent = Math.abs(nowTillDeadline / 60000);
            var timeElapsed = Math.abs(timeTotalPercent - nowTillDeadlinePercent);
            var timeElapsedPercent = Math.abs((timeElapsed / timeTotalPercent) * 100);

            // moving the progress bar
            bar.style.width = timeElapsedPercent + '%';

            if (timeElapsedPercent >= 99) {
                bar.style.width = '100%';
                clearInterval(interval);
            }
        }, (1*1000))
    }
}

fillBar();

var Table=document.getElementsByTagName（“表”）；
var行=document.getElementsByTagName（“tr”）；
var rowDisplay=document.getElementsByTagName（“td”）；
函数填充栏（timeElapsedPercent）{
对于（i=0；i{
//从单元格中获取所需信息
var taskName=rowDisplay[0]。innerText；
var rawdadline=rowDisplay[1]。innerText；
var rawStartTime=rowDisplay[2]。innerText；
var bar=document.querySelector（'.bar'）；
//进度条的计算
var now=新日期（）；
var startTime=新日期（rawStartTime.replace（/（上午/下午）/，''）；
var截止日期=新日期（rawDeadline.replace（/（am | pm）/，''）；
var timeTotal=Math.abs（截止日期-开始时间）；
var timeTotalPercent=数学绝对值（timeTotal/60000）；
log（'taskName'is'，timeTotalPercent'的总时间（分钟）值）；
var nowTillDeadline=Math.abs（deadline-now）；
var nowTillDeadlinePercent=数学绝对值（nowTillDeadline/60000）；
var timeappeased=Math.abs（timeTotalPercent-nowTillDeadlinePercent）；
var timeElapsedPercent=Math.abs（（timeElapsed/timeTotalPercent）*100）；
//移动进度条
bar.style.width=timeElapsedPercent+'%'；
如果（timeElapsedPercent>=99）{
bar.style.width='100%'；
间隔时间；
}
}, (1*1000))
}
}
fillBar（）；

好吧，现在再次回答我自己的问题

我将包含该行的HTML，然后使用Javascript对其进行操作：

<td class="col-sm-4">
    <div id="progressBarBackground">
        <div class="bar" id="progressBar"></div>
    </div>
</td>


function fillBar() {

    const interval = setInterval(() => {

        var i;

        for (i = 1; i < Table.rows.length; i++) {

            // grabbing relevant info from DOM
            var taskName = Table.rows[i].cells[0].innerText;
            var rawDeadline = Table.rows[i].cells[1].innerText;
            var rawStartTime = Table.rows[i].cells[2].innerText;
            var bar = Table.rows[i].cells[6].getElementsByClassName("bar").item(0);

            // calculations for progress bar
            var now = new Date();
            var startTime = new Date(rawStartTime.replace(/(am|pm)/, ''));
            var deadline = new Date(rawDeadline.replace(/(am|pm)/, ''));
            var timeTotal = Math.abs(deadline - startTime);
            var timeTotalPercent = Math.abs(timeTotal / 60000);
            var nowTillDeadline = Math.abs(deadline - now);
            var nowTillDeadlinePercent = Math.abs(nowTillDeadline / 60000);
            var timeElapsed = Math.abs(timeTotalPercent - nowTillDeadlinePercent);
            var timeElapsedPercent = Math.abs((timeElapsed / timeTotalPercent) * 100);

            // manipulating the necessary DOM element    
            bar.style.width = timeElapsedPercent + '%';

            if (timeElapsedPercent >= 99) {
                bar.style.width = '100%';
                clearInterval(interval);
            }
        }
    }, (1*1000))
}

函数fillBar（）{
常量间隔=设置间隔（（）=>{
var i；
对于（i=1；i=99）{
bar.style.width='100%'；
间隔时间；
}
}
}, (1*1000))
}

因此，我的问题如下：

1） for循环需要在间隔内，而不是相反。我在某个地方读到，间隔基本上只是一个计时的for循环。对我来说，那是一个令人兴奋的时刻

2） 使用

.querySelector（）

获取进度条只获取第一个进度条，即使它位于for循环中；要获取每一行的进度条，除了带有索引位置的

.item（）

方法之外，还需要

.getElementsByCassName（）

方法，如果忽略它，您将永远无法从错误代码中知道它。因为我在单元格中只有一个元素要获取，所以它的索引位置是0

3） 在for循环开始时，我从

displayRows.length

更改为

Table.rows.length

，但为了做到这一点，我必须更改定义

var Table

的方式。我使用get

.getElementsByTagName（）

，而不是使用get

.getElementById（）

——对于我的noob同伴，请注意它只是一个元素，而不是元素

我认为这是三个主要问题。可能还有其他一些小问题，但从现在到我第一次发布问题时，我尝试了大约100种不同的方法，所以很难知道

---

当我对所有问题进行故障排除时，我还在不同的地方使用了console.log。为了代码整洁，我在这里删除了这些行，但它们非常有用。

您不应该在

行

上循环，而不是

行显示

？我只是尝试了Row.length和Row.item（I），但结果没有变化。您可以在代码中的任何位置使用该语句来查看是否达到某个点。在代码中放置两个这样的代码，看看它在哪里中断。还可以使用查看为变量分配了什么类型的值。我花了一些时间处理调试器和控制台日志。我无法从中得到任何有用的信息。所有的定义看起来都是正确的。它到达每一条鳕鱼线