How to Highlight Table Rows Based on td Value in Razor Pages

Описание: Discover a simple way to `highlight rows` in a Razor page table using jQuery, even for dynamically generated content!
---
This video is based on the question https://stackoverflow.com/q/73880862/ asked by the user 'PipecockJackson' ( https://stackoverflow.com/u/4769377/ ) and on the answer https://stackoverflow.com/a/73881147/ provided by the user 'Dimitris Maragkos' ( https://stackoverflow.com/u/10839134/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I briefly highlight a table row based on a td value, in a programatically added row in a razor page

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Highlighting Table Rows in Razor Pages: A Step-by-Step Guide

When working with Razor Pages, you may find yourself needing to highlight specific rows in a table following specific conditions. For instance, you might want to visually indicate which rows in a table contain recently added items. This guide will walk you through how to accomplish this using jQuery.

The Problem

You are creating a table that displays task progress for users, and dynamically adding rows based on conditions from your model (like vwAssignedTaskProgress). In your case, you want to highlight rows that contain the text 'recent', but you're running into issues:

Your jQuery selector does not work on the dynamically generated rows.

You're having trouble utilizing the .effect() method from jQuery UI because it is not included by default with jQuery.

Solution Overview

To successfully highlight the rows, here's what needs to be done:

Add a class for recent items in your td elements.

Include jQuery UI in your project to enable the highlight effect.

Use jQuery to apply the highlight effect correctly on the class we've added.

Step 1: Update Your HTML Structure

First, modify your table generation logic to include a class on the td where the text 'recent' appears. This will make it easy to target these elements later with jQuery.

Replace your existing table structure with this:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Include jQuery UI

jQuery UI is not part of the standard jQuery library, so you'll need to include it in your Razor Page. You can include it like this:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Apply the Highlight Effect

Now, you can use jQuery to apply the highlight effect to the rows marked with the class 'recent'. Use the following jQuery code:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

CSS Class: By adding the class "recent" to the td, you are defining which cells to target for highlighting.

jQuery UI: Including jQuery UI allows you to use the effect() method, which isn't available in regular jQuery.

Highlighting:

$('.recent').parent() selects the parent tr of all td elements with the class 'recent'.

.effect("highlight", {}, 3000) applies the highlight effect over 3 seconds.

Conclusion

Highlighting new table rows based on specific conditions in Razor Pages can greatly enhance user experience by drawing attention to important updates. By following the steps outlined above, you can easily implement this functionality using jQuery and jQuery UI.

Now go ahead, implement this in your project, and see how easy it is to make your data visually engaging!