Javascript 使用jQuery设置表行背景颜色的动画

这是我的

Javascript:

var table = document.getElementById("Table-1");
var rowCount = table.rows.length;



for(var i=0;i<6;i++) {


row = table.insertRow(rowCount);
cell1 = row.insertCell(0);
cell1.name = "animate";
cell1.id = i ;
var content = document.createElement("output");                
content.innerHTML = i ;
cell1.appendChild(content);
rowCount++;

  // if (i%2 == 0) {
       setInterval(function() {
           $(input[name="animate"]).animate( { backgroundColor: '#f08080' }, 'slow')
           .animate( { backgroundColor: 'red' }, 'slow'); 
                 }, 1000);
   // }

}​

var table=document.getElementById（“表1”）；
var rowCount=table.rows.length；
对于（var i=0；i，脚本中有几个问题：


您可以创建
output
元素，而不是
input
您可以命名
td
，但稍后在选择器中引用
input
选择器中缺少撇号
在循环中无缘无故地启动多个动画
您可以将普通javascript与jquery混合使用（这只是化妆品）

将选择器更改为：

setInterval(function() {
    $('table td input').animate({
        backgroundColor: '#f08080'
    }, 'slow').animate({
        backgroundColor: 'red'
    }, 'slow');
}, 1000);

请参阅更新的。
相同的HTML，格式更好：

<table id="Table-1" border="1">                   
    <tr>
        <th><center>List</center></th>
    </tr>
</table> ​


列表
​

工作JavaScript：

var table = document.getElementById("Table-1");

for(var i=0;i<6;i++) {   
    var row = document.createElement('tr');
    var cell = document.createElement('td');
    cell.className = 'animate';
    cell.id = i;
    cell.innerHTML = i;
    row.appendChild(cell);
    table.appendChild(row);     

    setInterval(function() {
       $('td.animate').animate( { backgroundColor: '#f08080' }, 'slow')
       .animate( { backgroundColor: 'red' }, 'slow');
    }, 1000);
}​

var table=document.getElementById（“表1”）；
对于（var i＝0；i我认为最好的解决方案（在我的代码中）是在
中，您应该考虑使用CSS3动画，不需要jQuery。

简单地说，定义动画：

@keyframes back-animation
{
from {background: white;}
to {background: red;}
}

并将其应用于元素，在您的示例中，仅应用于所需列中的或类

#Table-1{
   width:200px;
   text-align:center;
   background:red;
   animation:back-animation 2s linear 1s infinite alternate;
}

下面是带有所需前缀的JS文件


ps：这在Internet Explorer上不起作用。
作为一种替代方法，您可能希望使用
insertRow
和
insertCell
-。显然，您的解决方案是可行的，但在处理表时，使用这些方法很好：）
#Table-1{
   width:200px;
   text-align:center;
   background:red;
   animation:back-animation 2s linear 1s infinite alternate;
}