Question

我使用以下代码尝试更改给定时间间隔内行的背景颜色：

var $tr = $tableBody.find('tr[id=' + id + ']');

setTimeout(function () {
    $tr.css("background-color", "red");
    $tr.effect("highlight", {}, 2000);
}, 1000);

不幸的是，上述情况无效。

添加行时是否需要css？或者通过定义样式有更好的方法吗？

修改以下是JSFIDDLE

的示例

Answer 1

更新：这是一个适用于点击的工作jsfiddle。

您的代码问题是您在每次','声明后使用var

$(document).ready(function() {
    $('#myTable').on('click',function(){
      var $tbl = $('#myTable');
      var $tblbody = $tbl.find('tbody');
      var $tr = $tblbody.find('tr[id=' + 1 + ']');

      $tr.addClass('highlight');
    });

})

Answer 2

我建议不要直接更改CSS元素，而是在CSS样式表中设置的元素中添加一个类：

// CSS

.highlight{background-color:red}

// JS将高亮类添加到行

$('#' + id).addClass('highlight');

//设置超时以在给定时间范围之后移除突出显示类（在此示例中为2秒）：

setTimeout(function(){
    $('#' + id).removeClass('highlight')}, 2000)

这样你就不会改变它的CSS - 你可以多次使用高亮类，也可以使用其他东西。

请注意，您需要确定addClass方面的触发器 - 否则这将在页面加载时添加它，并且像所有jQuery实例一样 - 您需要将jquery库添加到页面和$（document）.ready（函数）（）{}）包装所有这些。

Answer 3

我认为你正在寻找

setTimeout(function () {
    $tr.effect( "highlight", { color: "red" }, 2000 );
}, 1000);

另外，请确保您还包括jquery UI库：）

请参阅此JSFIDDLE

更改表行背景颜色

3 个答案: