How to make row selection in a large table using jquery

Question

In most tables or something that has many rows of data, I saw that when something is edited, this row turns yellow for a while, and then after a while returns to its normal state.

I have a data table with about 500 rows. The user can click edit anything, edit this line on a new page and return to the page with all 500 lines. When the user returns to the page with 500 lines, I want to make the last edited line selection for a while.

I know that we can use addCss, but how can I remove css after a while?

can anyone who did this suggest a way or set an example?

I am doing this, but getting a JS error:

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

where '# '+testis idatr

Answer 1

Give Highlight a try. This is the same thing that happens with your answer to SO when you click "Publish 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.

Answer 2

Try it. You need jQuery UI to use the highlight effect .

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

Answer 3

Something like that

$(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 adjust the class selection in your CSS, the page should show the highlighted last row of the table, and it should start to normalize after about 3 seconds.