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

Posted 2023-05-08

【中文标题】使用 jQuery 为表格行的背景颜色设置动画

【英文标题】：Animate background color of table rows with jQuery

【发布时间】：2012-10-06 20:54:12

【问题描述】：

这是我的code。

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

​

HTML：

<table id="Table-1" border="1">

                    <tr>
                        <th><center>List</center></th>
                    </tr>
</table> 

​

我用 javascript 构建了我的表格，我想每秒为几行设置动画，但它不适用于所有行。但是，当我为特定行设置动画时它可以工作。

谢谢。

【参考方案1】：

您的脚本中有几个问题：

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

将选择器更改为：

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

查看更新的FIDDLE。

【参考方案2】：

相同的 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);
​

实际操作中：http://jsfiddle.net/yR6jc/151/

【讨论】：

作为替代方案，您可能想要使用 insertRow 和 insertCell - developer.mozilla.org/en-US/docs/DOM/table.insertRow 。显然您的解决方案有效，但是在使用表格时，使用这些方法很好:)

【参考方案3】：

您应该考虑使用 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 Fiddle。

http://jsfiddle.net/yR6jc/156/

ps：这在 Internet Explorer 上不起作用。

【参考方案4】：

我认为最好的解决方案（我的代码）是在这个fiddle