Javascript 使用setInterval（）按自定义顺序遍历HTML表

我有一个HTML表格。一些细胞以#D6FFAD/rgb（214、255、173）为背景。我需要创建一个函数，该函数在表格中循环，并仅将具有该背景的单元格更改为不同的颜色。间隔需要一致。它需要按特定顺序遍历表单元格。该顺序由它们的ID（t1-t10）显示

下面的循环通过并根据需要更改颜色。不过，间隔的一致性是个问题。例如，#T1-#T4都需要改变背景，在这里之前间隔很好。然后，在更改#T7的颜色之前，在查看#T5和#T6时会出现延迟。我真的需要跳过第5节和第6节，但我很难想出一个解决方案

我可以为setInterval（）的第二个参数设置IF语句吗？如果没有背景，将间隔设置为0，否则设置为300

CSS:

JS:

HTML

废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话

您可以首先定义需要更新的元素，将它们放入数组中，然后在每次超时后，更新该数组中的下一个元素

var i;

var cellsToUpdate = [];
for(i = 1; i <= 12; i++) {
    var element = document.getElementById('t' + i);
    if (window.getComputedStyle(element).backgroundColor == 'rgb(214, 255, 173)')
        cellsToUpdate.push(element);
}

i = 0;
var interval = setInterval(
function () {
    if (i >= cellsToUpdate.length) {
        clearInterval(interval);
        return;
    }
    cellsToUpdate[i].style.backgroundColor = 'pink';
    i++;
}

, 300);

vari；
var cellsToUpdate=[]；
对于（i=1；i=cellsToUpdate.length）{
间隔时间；
返回；
}
cellsToUpdate[i].style.backgroundColor='pink'；
i++；
}
, 300);

---

看看这个。使用“选择”下拉菜单更改颜色后，调用上面的代码。完成时不要忘记清除间隔。

选择下拉菜单的行为是什么？是否应重置所有表格单元格的颜色并重新启动动画？以上是一个简化版本。细胞可以有许多种类。例如，blah$（'#selectDropdown'）.change（function（）{x=$（this.val（）；$（'td'）.css（“背景”，“白色”）；$（'.+x）.css（“背景”，“D6FFAD”）；setInterval function here}）；所以是的，它重置了colorsperfect。非常感谢！

i=1; 
setInterval(

function(){
t = document.getElementById('t'+i);
ts = window.getComputedStyle(t);
        if(ts.backgroundColor=='rgb(214, 255, 173)'){t.style.backgroundColor = 'pink';}
        i=i+1;

    if(i>=25){
        i=1;
        x = $("#selectDropdown option:selected").val();
        $('.'+x).css("background","#D6FFAD");
              }
       }    

 ,300);

<tr id="rowOne">
<td id="t1" class="changeThisBackgroundWithIntervalFunction">blah</td>  
<td id="t3" class="changeThisBackgroundWithIntervalFunction">blah</td>
<td id="t5">blah</td>
<td id="t7" class="changeThisBackgroundWithIntervalFunction">blah</td>
<td id="t9">blah</td>
<td id="t10" class="changeThisBackgroundWithIntervalFunction">blah</td>
</tr>

<tr id="rowTwo">
<td id="t2" class="changeThisBackgroundWithIntervalFunction">blah</td>  
<td id="t4" class="changeThisBackgroundWithIntervalFunction">Blah</td>
<td id="t6">Blah</td>
<td id="t8">blah</td>
<td id="t10" class="changeThisBackgroundWithIntervalFunction">Blah</td>
<td id="t12">Blah</td>
</tr>

var i;

var cellsToUpdate = [];
for(i = 1; i <= 12; i++) {
    var element = document.getElementById('t' + i);
    if (window.getComputedStyle(element).backgroundColor == 'rgb(214, 255, 173)')
        cellsToUpdate.push(element);
}

i = 0;
var interval = setInterval(
function () {
    if (i >= cellsToUpdate.length) {
        clearInterval(interval);
        return;
    }
    cellsToUpdate[i].style.backgroundColor = 'pink';
    i++;
}

, 300);