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

Question

这是我的 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 构建了我的表，我想每秒为几行设置动画，但它不适用于所有行。但是，当我为特定行设置动画时，它会起作用。

谢谢。

Answer 1

你的脚本有几个问题:

• 您创建 output 元素而不是 input
• 您将 td 命名为 td，但稍后您在选择器中引用了 input
• 您在选择器中缺少撇号
• 你无缘无故地在循环中启动了多个动画
• 您将 vanilla javascript 与 jquery 混合使用(这只是装饰品)

将选择器更改为:

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

查看更新 FIDDLE .