When you click on the column header to sort, the corresponding column row changes color in JavaScript

https://i.sstatic.net/4ELuv.jpg

When a user clicks on a column to sort, the color of the column changes or highlights the row. In my tablesorter with ascending and descending sorting capabilities, I want the sorted column to change colors for better visibility.

<table border="0" cellpadding="0" cellspacing="0" class="tablesorter">
<thead>
    <tr>
        <th>Study ID</th>
        <th>Study Title & Description</th>
        <th>Route</th>
        <th>Indication1</th>
        <th>Therapeutic Area</th>
        <th>Molecule</th>
    </tr>
</thead>

An attempt was made to highlight the sorted column row using this script:

- Unfortunately, it did not work as expected.

This functionality is being implemented in grails 2.1.1 javascript.

I attempted another approach using the following script:

<script>
$( "#th1" ).click(function() {
    alert("dsdsf");
    $("th").css({"font-color": "yellow", "font-size": "20%"});
});
</script>
<thead>

    <tr>
        <th id="th1">Study ID</th>
        <th>Study Title & Description</th>
        <th>Route</th>
        <th>Indication1</th>
        <th>Therapeutic Area</th>
        <th>Molecule</th>
    </tr>
</thead>

Answer №1

To implement the functionality, simply select the td elements and follow the steps demonstrated in this code snippet:View Working Example

$("td").click(function () {
    var colNumber = $(this).index();
    $(this).closest("table")
        .find("tr td:nth-child(" + (colNumber + 1) + ")")
        .css("background-color", "blue");
});

Answer №2

If you want to achieve a sorted look using only CSS, simply apply the sorted class to your column.

Check out this example on https://jsfiddle.net/8h7jgy1d/

This method is inspired by the tutorial found at this link.

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

Flashing images with jQuery Flickrush - Encasing the image within <li> tags

I have a div with an unordered list inside: <div id="flickr"> <ul></ul> </div> Currently, I am utilizing a plugin found at this link. To make it functional, I've included the following Javascript code: $(function() { $( ...

Why does the browser keep converting my single quotation marks to double, causing issues with my JSON in the data attribute?

This task should be straightforward, but I seem to be facing a roadblock. I am trying to insert some JSON data into an input's data attribute, but the quotes in the first key are causing issues by prematurely closing the attribute. Here is the code ...

Getting the value of a JSON object in CodeIgniter can be easily achieved by using the appropriate

My current project involves using the codeigniter framework to build a website. I am making an AJAX request with jQuery to retrieve data from the server. I have experimented with two different methods of receiving the data: one in a PHP associative array a ...

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Is there a way to activate the -webkit-animation for :before and :after pseudo elements? It seems that in this demo http://jsfiddle.net/4rnsx/, the animation is not working for :before and :after elements. I am attempting to make it work using Mootools ...

Highlighting with pretty JSON formatting

Is there a way to format JSON on a website and emphasize certain text or lines within it? Ideally, I'm looking for an IFRAME service that I can link to a URL where the JSON is downloaded and displayed as HTML. I want to be able to specify a search st ...

Facing a problem with querying interfaces and types in TypeScript

My goal is to pass a variable to an RTK Query API service that uses a typescript interface: const device_id: unique symbol = Symbol(props.id); const { data: device, isFetching, isLoading, } = useGetAssetsByIdQuery(device_id, { pollingInterv ...

jQuery not functioning properly when attempting to add values from two input boxes within multiple input fields

I am facing an issue with a form on my website that contains input fields as shown below. I am trying to add two input boxes to calculate the values of the third input box, but it is only working correctly for the first set and not for the rest. How can ...

Tips for sharing content within an iframe

Despite my efforts to find a solution, I have been unable to come across one that aligns with my specific situation. I currently have a form for inputting person data. Within this form, there is an iframe containing another form for adding relatives' ...

The current object is not being referenced by this specific keyword

I am encountering an issue in my React application where I am trying to set the state of a child component using this.props, but it is showing an error saying props is undefined. It seems like 'this' is not referencing the current object correctl ...

The active class in the navbar is malfunctioning in Bootstrap 4

I've been searching high and low to figure out how to add an active class to the current open link in my navbar. I've scoured Google and Stack Overflow for answers, but everything I found only applies to hash-type navbars using href="#". None of ...

Tips for receiving a reply from a post request

After successfully making and completing a post request, I'm wondering about using console.log(res.valor) in the code to display the data: consultarCorreio(){ this.cartS.cart.valorTotalItems this.cartS.getCorreiosPrazoPreco(this.cartS.cart.pesoTot ...

Incorporating a JavaScript variable into an inline HTML onclick event

Having trouble passing a variable into an inline onclick function. I've tried researching and following suggestions from this link, but encountered errors (Uncaught SyntaxError: missing ) after argument list): pass string parameter in an onclick func ...

Why isn't my Vue2 data updating in the HTML?

Starting my journey with Vue, I have been finding my way through the documentation and seeking support from the Vue community on Stack Overflow. Slowly but steadily, I am gaining a better understanding of how to create more complex components. The issue I ...

What is the best way to transfer variables from an ng-template defined in the parent component to a child component or directive?

Is there a way to pass an ng-template and generate all its content to include variables used in interpolation? As I am still new to Angular, besides removing the HTML element, do I need to worry about removing anything else? At the end of this ...

Increase the lag time for the execution of the on('data') function in Node.js

In my current function, it searches data from a database and performs an action with it. For the purpose of this demonstration, it simply increments a counter. exports.fullThreads = function(){ return new Promise((resolve, reject) => { MongoClien ...

Implementing universal design in Next.js 14

I'm encountering a problem while trying to use the style jsx global property in the latest version of Next.js. Previously, you would include it in the _app.js file, but since that file no longer exists, I assumed it should be added to the layout.tsx f ...

"Troubleshooting issue: jQuery AJAX encountering problems with parsing JSON

I recently came across a Uncaught SyntaxError: Unexpected end of input error in my code. var dataURL = "LineChartController?tp=" + tpAtt + "&dept=" + dept + "&date=" + dateMY; alert(dataURL); var JSONdata = jQuery.aja ...

Issue with retrieving the value of a JavaScript dynamically generated object property

I'm currently working on a React Material-UI autocomplete component and facing challenges with accessing a Javascript Object property within a handleSelect function. Although I can retrieve the townname value using document.getElementById, I know thi ...

New features in Next.js 13 include an updated server component and enhanced fetch capabilities for re

Is it possible to toggle the URL from the getData function? I have my main page component with JSON todos. Can I replace 'todos' with 'users' in my client component? import styles from './page.module.css' import Button from "@ ...

CSS: Trouble with getting SVG sprite to work

I am struggling to combine all my SVG icons into one sprite and then call it from CSS as a background-image, similar to how we do with other images. However, the icons are not showing up on the page. When I open the SVG image in my browser, I encounter thi ...