enable click functionality for individual table cells using jquery

Question

enable click functionality for individual table cells using jquery

My HTML table features cells that I want to highlight when clicked using CSS, but only until another cell is clicked.

I initially tried setting focus for the clicked cell and applying CSS styles based on focus, however this approach did not work as intended.

This is my current code:

$('td').click(function (event) {
    //$(this).tabindex = 0; 
    //$(this).tabindex = 1;
    $(this).focus();
});

And here is the corresponding CSS:

td:focus
{
    background-color:Blue;
}

I suspect that adding a class to td might be problematic since I would need to remove the class when another cell is clicked. I am seeking assistance in achieving my goal and exploring other possible solutions or workarounds.

jquery html css html-table

Answer 1

Answer №1

Give this a shot:

$('td').click(function (event) {
      $('td').removeClass('focus'); //Clear focus from other TDs
     $(this).addClass('focus');
});

Also try this:

td.focus { background-color:Blue; }

Answer 2

Give this a shot:

$('td').click(function (event) {
      $('td').removeClass('focus'); //Clear focus from other TDs
     $(this).addClass('focus');
});

Also try this:

td.focus { background-color:Blue; }

Answer 3

Answer №2

Initially, the :focus selector is primarily used for form input fields and may not apply to other elements. It is recommended to create your own custom class:

Javascript:

$('td').click(function (event) {
    $('*').removeClass('focus');
    $(this).addClass('focus');
});

CSS:

td.focus{
    background-color: Blue;
}

This method ensures that when a td element is focused, any other element with the .focus class will lose focus before applying it to the selected element.

You could also try:

 $ ('*') . click (function (event) { 
    $(this).removeclass ('focus');}); 
$ ('td'). Click (function (event) { 
$(this.addClass ('focus'));)

So by clicking on anything, a td that was previously focused will lose its focus, similar to how :focus works with input fields or how :active behaves with anchor tags)

Answer 4

Initially, the :focus selector is primarily used for form input fields and may not apply to other elements. It is recommended to create your own custom class:

Javascript:

$('td').click(function (event) {
    $('*').removeClass('focus');
    $(this).addClass('focus');
});

CSS:

td.focus{
    background-color: Blue;
}

This method ensures that when a td element is focused, any other element with the .focus class will lose focus before applying it to the selected element.

You could also try:

 $ ('*') . click (function (event) { 
    $(this).removeclass ('focus');}); 
$ ('td'). Click (function (event) { 
$(this.addClass ('focus'));)

So by clicking on anything, a td that was previously focused will lose its focus, similar to how :focus works with input fields or how :active behaves with anchor tags)

Answer 5

Answer №3

One way to maintain their attention until you click again is by utilizing the toggleClass function.

To see an example, visit this fiddle: http://jsfiddle.net/eVS9f/5/

$("td").click(function() {
    $(this).toggleClass("focus");
    });

Answer 6

One way to maintain their attention until you click again is by utilizing the toggleClass function.

To see an example, visit this fiddle: http://jsfiddle.net/eVS9f/5/

$("td").click(function() {
    $(this).toggleClass("focus");
    });

enable click functionality for individual table cells using jquery

Answer №1

Answer №2

Answer №3

Similar questions

Updating form validation by altering input value

Tips for including a footer element in React:How can a footer division be

change the css style with the !important rule to muiStyle

Designing a structure with three fieldset components

Exploring the mysteries of AngularJS ng-repeat with dynamic key-value pairs

The CSS transition is failing to revert to its original state after being combined with animations

How come modifying the css of one component impacts all the other components?

How can I use handlebars to display a video when the user clicks on an image?

Set the class of an element dynamically using ng-class and detect changes with ng-change

Tips for showcasing colorful XML script within an HTML text field

The Firefox browser is not fully displaying the button background

Is there a way to position the textfield so that it is next to my button?

How do I submit a form using jQuery .ajax() or .post() in a native iPhone Phonegap application?

Received a notification after submitting an HTML form

Issue encountered during the execution of the project on wamp server

Why does the appearance of my PHP spreadsheet change when I attempt to print it?

What is the best way to ensure DIVs or SPANs have a fixed width with their content while also utilizing the remaining available space with white space?

How can I make the arrows work on a secondary slider with EasySlider1.7?

Implementing a jQuery Popup to Show Error Messages

Is it possible to use a single function to both set the state and return JSX?