在表格单元格中设置背景颜色

Question

我正在探索 HTML 和 Jquery，我有一个简单的页面，我在其中使用包含一个表格行和十个表格单元格的表格。页面加载时，每个单元格的背景颜色为黄色。 我需要每两秒钟更改一次每个单元格的颜色。所以，我需要完成的是，获取每个单元格 id 并一个接一个地定期更改单元格颜色。 例如首先改变背景颜色 （变为绿色）id 为 1 的单元格，然后等待两秒钟移动到下一个单元格 id 为 2 更改它的背景颜色，直到单元格 id 为 10。

 $('table #my_table td').each(function(){
 var ids = $(this).attr('id');
 console.log(ids);// This will return 1,2,3,4,5,6,7,8,9,10
 });

 <div>
    <table id="my_table" style="width:55%">
        <tbody>
            <tr>
                    <td id="1" style="border: 1px solid black;">&nbsp;</td>
                    <td id="2" style="border: 1px solid black;">&nbsp;</td>
                    <td id="3" style="border: 1px solid black;">&nbsp;</td>
                    <td id="4" style="border: 1px solid black;">&nbsp;</td>
                    <td id="5" style="border: 1px solid black;">&nbsp;</td>
                    <td id="6" style="border: 1px solid black;">&nbsp;</td>
                    <td id="7" style="border: 1px solid black;">&nbsp;</td>
                    <td id="8" style="border: 1px solid black;">&nbsp;</td>
                    <td id="9" style="border: 1px solid black;">&nbsp;</td>
                    <td id="10" style="border: 1px solid black;">&nbsp;</td> 
            </tr>
        </tbody>
    </table>
</div>

Answer 1

您不需要将id 分配给每个表格行。只需使用setInterval() 循环处理每一行就可以了。像这样：

$('table#my_table tr').each(function() {
  var tr = $(this);
  setInterval(function() {
    var current = tr.attr('data-current');
    tr.find('td').eq(current).css('background-color', tr.data('color'));
    current++;
    tr.attr('data-current', current);
    if (current > tr.find('td').length) {
      tr.find('td').css('background-color', '#fff');
      tr.attr('data-current', 0);
    }
  }, 200);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table" style="width:55%">
  <tbody>
    <tr data-color="#ff0" data-current="0">
      <td id="1" style="border: 1px solid black;">&nbsp;</td>
      <td id="2" style="border: 1px solid black;">&nbsp;</td>
      <td id="3" style="border: 1px solid black;">&nbsp;</td>
      <td id="4" style="border: 1px solid black;">&nbsp;</td>
      <td id="5" style="border: 1px solid black;">&nbsp;</td>
      <td id="6" style="border: 1px solid black;">&nbsp;</td>
      <td id="7" style="border: 1px solid black;">&nbsp;</td>
      <td id="8" style="border: 1px solid black;">&nbsp;</td>
      <td id="9" style="border: 1px solid black;">&nbsp;</td>
      <td id="10" style="border: 1px solid black;">&nbsp;</td>
    </tr>
    <tr data-color="#f00" data-current="0">
      <td id="1" style="border: 1px solid black;">&nbsp;</td>
      <td id="2" style="border: 1px solid black;">&nbsp;</td>
      <td id="3" style="border: 1px solid black;">&nbsp;</td>
      <td id="4" style="border: 1px solid black;">&nbsp;</td>
      <td id="5" style="border: 1px solid black;">&nbsp;</td>
      <td id="6" style="border: 1px solid black;">&nbsp;</td>
      <td id="7" style="border: 1px solid black;">&nbsp;</td>
      <td id="8" style="border: 1px solid black;">&nbsp;</td>
      <td id="9" style="border: 1px solid black;">&nbsp;</td>
      <td id="10" style="border: 1px solid black;">&nbsp;</td>
    </tr>
  </tbody>
</table>

Answer 2

var td = 0;
var itv = setInterval(function() {

  $('table#my_table tr').eq(td).css('background-color', '#ff0');
   clearColour(td);
  td++;

  if (td === $('table#my_table td').length) {
  
    clearInterval(itv);
    $('table#my_table tr').eq(td).css('background-color', '#ff0');
  }
  
}, 2000);



function clearColour(td){
$('table#my_table tr').eq(--td).css('background-color', 'white');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_table">
  <tbody>
    <tr>
      <td>1</td>
      <td>Testing 1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Testing 2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Testing 3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Testing 4</td>
    </tr>
  </tbody>
</table>