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>

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

2 个答案: