CODEWITHSUNDEEP
jquery
Omnipresent
Omnipresent

Reputation: 30384

how to make a row highlight in a large table using jquery

On most of tables, or anything that has lot of data rows, I have seen that when something is edited that row becomes yellow for a while and then after a while goes back to its normal state.

I have a data table with about 500 rows. User can click edit on anything, edit that row on a new page, and come back to page with all 500 rows. When user comes back to page with 500 rows I want to make the last edited row highlight for a while.

I know we can use addCss but how will I remove the css after a while?

can someone who has done this please suggest a way or show an example?

I am doing this but getting a JS error:

$('#'+test).effect("highlight", {}, 3000);

where '#'+test is a id of a tr

Upvotes: 3

Views: 5528

Answers (3)

Andrew
Andrew

Reputation: 238717

Try this. You need jQuery UI in order to use the highlight effect.

$('a').click(function(){
    $('tr').effect('highlight', 3000);
});

Upvotes: 2

alex
alex

Reputation: 490233

What about something like this

$(window).load(function() { // that way, the transition won't start until the whole page has loaded. note I think you may only have one of these events.

    $('#my-table tr:last td').addClass('highlight');

    setTimeout(function() {
        $('#my-table tr:last td').animate( { backgroundColor: 'transparent' }, 1000);

    }, 3000);



});

Now if you set up a class highlight in your CSS, the page should should show your last table row highlighted, and it should begin to fade to normal in roughly 3 seconds.

Upvotes: 1

TheVillageIdiot
TheVillageIdiot

Reputation: 40497

Give Highlight a try. This is the same thing that happens to your answer on SO when you hit "Post Your Answer".

Suppose you have this HTML:

    <table id="myTbl">
        <tr>
            <td>Frist</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

CODE:

$(document).ready(function(){
    $("#myTbl tr:first-child").effect("highlight", {}, 3000);
}); //this is from jquery.com page.

Upvotes: 4

Related Questions