CODEWITHSUNDEEP
jquerycss
Ivan-Mark Debono
Ivan-Mark Debono

Reputation: 16300

Change table row background color

I'm using the following code to try to change the row's background color for a given time interval:

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

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

Unfortunately the above is not working.

Do I need the css whilst adding the row? Or is there a better way by defining a style?

EDIT Here is an example JSFIDDLE

Upvotes: 0

Views: 2615

Answers (3)

Edison Biba
Edison Biba

Reputation: 4423

UPDATED: here is a working jsfiddle that works on click.

The problem with you code was that you were using ',' after each var declaration

$(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');
    });

})

Upvotes: 1

pumpkinzzz
pumpkinzzz

Reputation: 2967

i think you're looking for

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

also, be sure you're including jquery UI library as well :)

see this JSFIDDLE

Upvotes: 0

gavgrif
gavgrif

Reputation: 15499

I would recommend not altering the elements CSS directly, but instead adding a class to the element that is set in the CSS style sheets:

//CSS

.highlight{background-color:red}

//JS add the highlight class to the row

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

//set a timeout to remove the highlight class after a given time-frame (2 seconds in this example):

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

This way you are not altering its CSS as such - and you can use the highlight class multiple times and for other things as well.

Note that you need to determine a trigger for the addClass aspect - otherwise this will add it on page load, and like all jQuery instances - you need the jquery library added to your page and the $(document).ready(function(){}) wrapper around all of it.

Upvotes: 1

Related Questions