Extracting text from a grid view in jQuery to style with CSS

My asp.net datagrid's HTML is displayed below in the browser:

<div id="divViewAlldealers" class="">
   <table id="ctl00_cph1_ucMS_grdAllDealers" cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
     <tbody>
        <tr>
           <td style="background-color: rgb(232, 246, 211);">25 - Vickar Community Chevrolet Ltd</td>
        </tr>
        <tr>
           <td>0 - Jim Gauthier Chevrolet Ltd.</td>
        </tr>
        <tr>
            <td>0 - Murray Chevrolet Ltd.</td>
        </tr>
        <tr>
            <td>0 - Birchwood Chevrolet Buick GMC Ltd.</td>
        </tr>
  </tbody>

I need to apply a different background color to the td containing the current customer. Is there a way to identify and highlight the current customer without using jQuery's each() function?

The position of the current customer in the list may vary and not necessarily be in the second td.

While I'm aware that this can be achieved with jQuery, I am looking for alternative solutions that don't involve the use of the each() function.

jqueryasp.netcss

Answer №1

Take a look at this fiddle. If the current user is Murray, you can target all TD elements that contain 'Murray' in their text and change their background color.

$("tr td:contains('Murray')").each(function(){
  $(this).css("background-color"," rgb(232, 246, 211)");
});

http://jsfiddle.net/KSxLy/

UPDATE

$("tr td").filter(function(){
    return $(this).text() === 'San Sarif';
}).css("background-color"," rgb(232, 246, 211)");

JSFIDDLE

Answer №2

To improve the functionality, consider adding a data attribute to each td element indicating whether it represents a current customer. Then, you can use jQuery to select these elements and change their background color.

  <table id="ctl00_cph1_ucMS_grdAllDealers" cellspacing="0" border="1" style="border-   collapse:collapse;" rules="all">
 <tbody>
    <tr>
       <td data-currrentCustomer="true">25 - Vickar Community Chevrolet Ltd</td>
    </tr>
    <tr>
       <td>0 - Jim Gauthier Chevrolet Ltd.</td>
    </tr>
    <tr>
        <td>0 - Murray Chevrolet Ltd.</td>
    </tr>
    <tr>
        <td>0 - Birchwood Chevrolet Buick GMC Ltd.</td>
    </tr>
</tbody>
</table>

jQuery

$(document).ready(function(){
    $("td[data-currrentCustomer='true']").css({"background-color":"rgb(232, 246,211)"});
});

For more information, please visit my Fiddle

Answer №3

If you're looking to highlight a specific customer in your table, this code snippet will do the trick.

let currentCustomer ="Vickar";
$( "td:contains('"+ currentCustomer +"')" ).css( "color", "#FF0000" );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing JavaScript getElementByClassName to retrieve all the elements within a ul without having to specify the class name in each li

Looking to tidy up my HTML/CSS. Is there a way to keep this JavaScript functioning without needing to add the class name to every li element within the ul? Any suggestions on how to improve the visual appeal and readability of the HTML code? const Profi ...

javascripthtmlcss

Comparing IWebHost, IHost, and WebApplication in .NET 6: Utilizing ILogger Dependency Injection in the Startup

Recently, I upgraded a .NET WebApp from version 2.1 to versions 3.1 and 6.0. As I look to transition to the new 'minimal hosting model' in .NET 6, my goal is to maintain separation for my lengthy and intricate Startup class. Currently, I am uti ...

c#asp.netdependency-injectionserilog

Combining two arrays in a view and then storing them in a database using Codeigniter

Hello everyone, I am a new member on this platform... Currently, I am working with the codeigniter framework and have two separate arrays in my view. The first array includes data from a form input named customerData, customerData = { customerid ...

jqueryajaxcodeigniter

The HTML button functions correctly on Windows browsers but experiences issues on Android devices

Explore some delicious minty black tea blends here! After clicking on the "Add to Cart" buttons for various quantities, a confirmation message pops up indicating that the product has been successfully added to the cart. An issue arises when attempting to ...

androidhtmlcsswordpressgoogle-chrome

An Ajax call navigates to the index.html page

Could you please assist with an issue I am facing? I have written the code below to make an ajax request to a specific link. However, instead of executing the ajax call using a POST request, the page is being redirected to index.html with the link in the ...

phpjavascriptjqueryasp.netajax

What is the best method to send user information from a registration form to a MySQL database table using AJAX without having to refresh

Currently facing an issue where user registration data (email, username, password) is not being submitted to the register table tbl_register when the submit button is clicked. Utilizing PHP with AJAX to prevent page refresh upon clicking submit and sendin ...

phpjqueryajax

What steps can be taken to rectify the issue with the table during the export to

I am using a library called DataTable to present my data in a table format. The DataTable has buttons on the header, one of which allows exporting the data into an Excel file. However, when I try to open the exported data in Excel, I encounter an error sta ...

javascriptphpjquerymysqlexcel

Issue with unsorted icon not displaying after resetting sorting on Tablesorter

I am attempting to follow a procedure $(function() { var $table = $('#mytable'); $('#reset-link').click(function() { $table.trigger('filterReset').trigger('sortReset'); return false; }); ...

jquerytablesorterreset

Determining the orientation of an image in JavaScript

Currently, I am attempting to determine the orientation of images using JavaScript in order to apply a specific class to them. This process seems to be functioning correctly on Firefox, but is presenting challenges on other browsers. It appears to work bet ...

javascriptjqueryhtmlcssbrowser

Snug enclosure surrounding an image

I'm currently working on creating a chat application and I need the chat bubbles to snugly wrap around their contents. It's working fine for text, but when an image is included in the bubble, it creates some issues. Below is the HTML code that I ...

htmlcsscss-positionpositioning

An unknown browserLink expression was encountered

I encountered an issue with " browserLink " that you can see below <div ng-show="optList.editing && optList.BANKRUPT_FLG != 'Y' && (optList.OPT != 'TF' || (optList.OPT == 'TF' && optLi ...

jqueryhtmlangularjsvisual-studiobrowser-link

Triangle shape with transparent background on top of iframe or div

Currently facing an issue where I need to add an iframe containing maps to my page. However, I also need one (or two) triangles placed over this iframe with a transparent background. I attempted this solution, but unfortunately, it did not work as expect ...

javascripthtmlcss

Validation pattern that permits including text, select special characters, and ensue within a designated character limit

Hey there! I've been working on creating a validation expression for input length that also allows text and punctuation marks like commas, question marks, semicolons, colons, exclamation points, quotation marks, pounds, dollars, and percentages. Cur ...

asp.netregexvalidation

Tips for transferring data from Controller to View using IEnumerable Model in MVC

Currently, I have a view containing 1700 records that need to be paginated using ajax for lighter page loading. The paging functionality works smoothly, bringing in a new set of records based on the selected page. Issue: The problem arises when displaying ...

c#jqueryajaxasp.net-mvcviewbag

Transform the size and convert an object from a picture into text based on the user's scrolling

I've been intrigued by the scrolling effects used on websites like Google SketchUp and Google Plus. It's fascinating how elements can transform as you scroll down the page. For example, on Google SketchUp's site, the banner starts off integr ...

javascriptjqueryhtmlcssscroll

Ways to place an image above a link when hovered over

How can I create a rollover effect in my navbar using CSS? I want a light bulb icon to appear above a link when the user hovers over it. .navbar .nav a, .navbar .nav .a { font-size: 16px; } .navbar .nav a:hover, .navbar .nav .a:hover { background- ...

htmlcssimagehyperlinkhover

I seem to be having trouble getting my CSS to load properly on Internet Explorer 11 and Firefox, as it only seems

Currently, I am in the process of developing a basic webpage. Oddly enough, my CSS styling seems to be functional only in Chrome, with no success when it comes to both Firefox and IE11. Here is a snippet of my HTML code: <html> <head> < ...

htmlcssinternet-explorergoogle-chromefirefox

How can I use the JQuery .load() method to send a POST request after a successful ajax post?

Following a successful Ajax post, I am looking to render the template associated with POST using JQuery's .load() method in the handler function. Every time a successful POST is made, the GET request keeps getting called, resulting in the rendering of ...

javascriptajaxjqueryweb-development-server

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

javascriptjqueryhtmlcss

Not all properties are affected by the CSS stylesheet

Even though my CSS stylesheet successfully changes the background color of the page, I am facing issues with other properties that I have set on my HTML tags. {% block body %} <div id='title'> <h1> VISUALIZER2D ...

htmlcss