Tips for modifying the appearance of an anchor <a> element within a table cell with jQuery

One issue I am facing involves changing the style of a specific element within a table cell using jQuery. The change needs to be based on the value in another cell. Below is the table structure:

                             <table id="table">
                                <tr>
                                    <td>
                                        <a href="www.google.pl">YYYYYYYYY</a></td>
                                    <td>HHHHHHH<td>
                                </tr>
                                <tr>
                                    <td>Jedi Armor1</td>
                                    <td>HHHHHHH</td>
                                </tr>
                                <tr>
                                    <td>Jedi Armor2</td>
                                    <td>HHHHHHH</td>
                                </tr>
                            </table>

Here is the jQuery code snippet:

            $(document).ready(function() {

                $('#table tr td').each(function(){
                     var textValue = $(this).text();
                        if(textValue == 'HHHHHHH'){
                        // add css class or any manipulation to your dom.
                    $(this).parent().css('color','red');
                    $(this).parent().children('td a').css('color','red');
                    };
                });

            // end of hover function
        });

The challenge lies in how to modify the style of the specified element.

Answer №1

children() function is limited to one level down

Instead of:

$(this).parent().children('td a')

Use:

$(this).parent().find('a');

Alternatively, you can simply add a class to the row and adjust the style using CSS for the entire row. It's easier to manage classes than inline css modifications

$(this).parent().addClass('has_H');

CSS

tr.has_H, tr.has_H a{
    color:red;
}

Answer №2

If you modify children to find, your code will function properly.

Check out this example for a demonstration.

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

What is the functionality of the icon `<i>` in Twitter Bootstrap?

After adding an icon to a webpage, I noticed that it replaced the old, semi-deprecated <i> tag and instead used a customized image tag. It almost seems like <i ...> is just a simpler version of <img ...>. I'm curious about how this ...

Implement a sequence of animations within a div using jQuery

My goal is to create an animation effect for each div element within a row when the user scrolls down to that specific point on the page. The layout consists of three <div> elements in the same row. The structure of the HTML code is as shown below: ...

Angular image source load test encountered an error

<div class="col-xs-4 col-sm-4 col-md-4"> {{jsonData[current].profilepic}} <div ng-if=IsValidImageUrl(jsonData[current].profilepic)> <img id="pic" ng-src="{{jsonData[current].profilepic}}" alt=""/> </div> < ...

Could you clarify that for me?

Let's take a look at the function isIsogram(str) which checks if a string is an isogram. An isogram is a word or phrase in which no letter occurs more than once. The code snippet for this function can be seen below: We are particularly interested in ...

Best practices for managing Ajax requests in ASP.Net MVC 3

When it comes to implementing Ajax calls in ASP.Net MVC, there are numerous options available for making calls, handling them on the server, and managing success and error scenarios on the client side. While some aspects have clear solutions, I have strugg ...

Looping in Jquery with setTimeout function

I am having trouble with my simple loop while, it seems that the issue lies with setTimeout. I am attempting to create a game with a countdown. while ( there is time ) { // actions possible to do //my timer function } If c represents the time var c ...

Modify the color of the object model when clicked - Three.js

When a user clicks on a specific part of the object model, I want to display the wireframe of that part to indicate which part is being modified. The user can then choose a color for that part from a palette. However, the line child.material.color.set(se ...

How long does it take to delete and recreate a cloudfront distribution using AWS CDK?

I am currently undergoing the process of migrating from the AWS CDK CloudfrontWebDistribution construct to the Distribution Construct. According to the documentation, the CDK will delete and recreate the distribution. I am curious about the total duration ...

Would it be better to lock a variable stored in req.session, or opt for a massive global variable instead?

As I delve into creating a game using node.js, the premise is sending units on missions and waiting for their return. The challenge lies in ensuring that the same unit cannot be sent on two different missions simultaneously, nor can two sets of units be di ...

The jQuery click function triggers immediately upon the loading of the page

Despite my best efforts to resolve this issue independently and conduct extensive research on Google, I am still unable to identify the root of the problem. It seems that the click function continues to activate upon page load. Kindly elucidate the under ...

Struggling to map JSON data (received from WCFRest) onto an HTML table

After creating a WCFRestful service that populates data in JSON format as shown below: {"GetEmployeesJSONResult":"[{\"Name\":\"Sumanth\",\"Id\":101,\"Salary\":5000},{\"Name\":\"Sumanth\",\"I ...

Retrieve all text within a <div> element excluding the content within an <h5> tag using XPath

I have been researching and experimenting with different solutions for the issue at hand, but unfortunately, none of them have proven successful so far. Here is the HTML code that I am working with: <div class="detalhes_colunadados"> <div clas ...

Creating a Javascript object from a JSON string

Looking for a way to convert a JSON string into a JavaScript object? You can make use of the following code snippet obtained from the server: JSON String: ["{"title":"Admin Dhaka","href":"#0","dataAttrs":[],"data":["{\"title\":\"BNS HAJI M ...

Exploring Linked Data in JSON API Response with Rails API, Active Model Serializer, and Vue.js Single Page Application

I am working with data structured in a tree/hierarchical model for climbing areas, where they are connected through parent and child relationships. By utilizing the JSON API adapter along with my Active Model Serializer, class AreaSerializer < ActiveM ...

No search results found for Mongoose text search query

Despite using Mongoose 5.7.8 for my app, the text search feature is not yielding any results. Below is a schema/model example: import mongoose, { Document, Schema } from 'mongoose'; import { Moment } from 'moment'; import { IUser } fr ...

Utilizing Promise and setTimeout in a generator function to develop an asynchronous generator: A comprehensive guide

I am currently working on creating a generator function that produces an async generator. This Generator will yield a deferred value at each time, using promises. The values and their respective delays (in milliseconds) are sourced from two separate arrays ...

Managing session IDs in PHP after a successful login to dynamically update the menu bar option from "login" to "logout"

On my website, you will find a menubar with five menus: HOME, DATA, FEEDBACK, ABOUT, and LOGIN. I want to be able to log in by clicking on the login menu (a jQuery modal window pops up for logging in), and after successfully logging in, I would like the ...

Troubleshooting the Angular 7 mat-select issue caused by the "ellipsis" CSS property with three dots

I am facing an issue with a mat-select property called "ellipsis". The three points appear in a different color than the text itself. I attempted to change it to white using the following code, but the dots still remain black. ::ngdeep .example{ ...

To properly document the results, I must utilize a button to record the identification of a specific color

I'm working on a code that creates a clickable box which changes colors from black to green to white by going through different shades of green whenever the mouse is clicked. What I now need to do is implement a feature that displays the current shade ...

Syntax Error: The function `loadReposFromCache(...).error` is not defined in this building

I'm currently attempting to utilize the SyntaxHighlighter v4 plugin, but I'm facing issues with the build process! While following the guidelines provided here, an error popped up: $ ./node_modules/gulp/bin/gulp.js setup-project [10:12:20] Requ ...