更改表格行的背景色

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了-您可以多次使用Highlight類，也可以將其用於其他用途。

請注意，您需要確定addClass方面的觸發器-否則，它將在頁面加載時添加它，並且像所有jQuery實例一樣，您需要將jquery庫添加到頁面中，並添加$（document）.ready（function（）{ }）將其全部包裝。

Answer 3

我覺得你在找

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

另外，請確保還包括了jQuery UI庫：)

看到這個JSFIDDLE