Question

So based on a user request, I came up with the following BugMonkey code that helps you find the case you're currently working on when it's in the grid view:

var working_on = $("#Menu_Working_On").html().split(' ');
$("tr[ix='"+ working_on[2]+"']").fadeTo('slow',0.1, function () { $(this).fadeTo('slow',1, function () { //Animation complete
})});

The only thing I can get it to do is fade out and back in, though. It'd be much more useful to have it subtly highlight.

I've tried such things as:

$(this).css('border-style','dashed');
$(this).css('border-width','2px');

But to no avail.

Can anyone figure out how to highlight a row with JQuery?

Answer 1

You can't apply most styles to table rows - instead, you have to apply them to the table cells.

var ixBug = $("#Menu_Working_On").html().split(' ')[2];
$("tr[ix='" + ixBug + "']")
    .children('th,td').css('background-color', 'orange');

or

    .children('th,td').css('border-top', '2px dashed orange')
                      .css('border-bottom', '2px dashed orange');