How can I briefly highlight a table row based on a td value, in a programatically added row in a razor page

Question

I have a table in a razor page in which I'm looping through an IENumenrable collection (vwAssignedTaskProgress) and adding rows based on conditions. One or more of the contains 'recent' to indicate it is a row that has been recently added. I want to briefly highlight these rows to indicate they are new rows.

My problem is twofold. I'm using jquery (although I'm happy with any solution) and I can't get the jquery selector to fire on rows generated inside my loop. It works fine on content outside my @ block of code. And secondly, I can't seem to get .effect to work in Jquery (trying outside the @ block). Research tells me that it's part of jquery UI which is both incorporated into jquery and deprecated. Using jquery 3.5.1

 <table class="table text-center" id="tblTasks4">
    <tbody>
        @foreach (var tsk in Model.vwAssignedTaskProgress){
            @if ((@tsk._ChildUserId == @student.ChildUserId) && (@tsk.stStatus < 2))
            {
                <tr >
                    <th scope="row">
                        @tsk.Description
                    </th>
                    
                    @if(@tsk.Created > DateTime.Now.AddMinutes(-1))
                        {
                        <td >
                            recent
                        </td>
                        }
                </tr>
                }
            }
    </tbody>
</table>

script block, within a form and body tag.

<script>              
    $('#tblTasks4 td').filter(
        function(t){
             if($(this).text() =="recent") {
                 $(this).closest('tr').effect("highlight", {}, 3000);
                return;
            }      
        });  
</script>

Answer 1

First of all jQuery UI is not included in jQuery. You have it add it to your project separately.

Then I would add a recent class to the recent tds and hightlight them using:

$('.recent').parent().effect("highlight", {}, 3000);

Example:

<table class="table text-center" id="tblTasks4">
    <tbody>
        @foreach (var tsk in Model.vwAssignedTaskProgress)
        {
            @if ((@tsk._ChildUserId == @student.ChildUserId) && (@tsk.stStatus < 2))
            {
                <tr>
                    <th scope="row">
                        @tsk.Description
                    </th>

                    @if (@tsk.Created > DateTime.Now.AddMinutes(-1))
                    {
                        <td class="recent">
                            recent
                        </td>
                    }
                </tr>
            }
        }
    </tbody>
</table>

@section Scripts {
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js" integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c=" crossorigin="anonymous"></script>
    <script>
        $('.recent').parent().effect("highlight", {}, 3000);
    </script>
}