Question

我有一个HTML表格。一些单元格具有＃D6FFAD / rgb（214,255,173）作为其背景。我需要创建一个循环遍历表的函数，并将只有该背景的单元格更改为不同的颜色。间隔需要保持一致。它需要按特定顺序浏览表格单元格。该订单由其ID（t1-t10）显示。

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

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

CSS：

.changeThisBackgroundWithIntervalFunction{background:#D6FFAD}

JS：

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);

HTML

<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>

Answer 1

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

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);

查看此fiddle。使用选择下拉列表更改颜色后，请调用上面的代码。完成时不要忘记清除间隔。

使用setInterval（）以自定义顺序循环遍历HTML表

1 个答案: