Press the add button and then click on removeclass

My table structure is as follows:

<table>
    <tr>
        <td>table 1 a <span class="icon"></span></td>
    </tr>
    <tr>
        <td>table 2 b <span class="icon"></span></td>
    </tr>
    <tr>
        <td>table 3 c <span class="icon"></span></td>
    </tr>
</table>

When I click on a row, the respective icon span should have the class 

<span class="icon icon-active"></span>

Subsequently, clicking on another row should remove the icon-active class from the previous row's icon span, while adding it to the newly clicked row's icon span.

javascriptjquerycss

Answer №1

To implement this functionality, utilize the removeClass() and addClass() functions as demonstrated below.

$('table tr').click(function () {
    $('table .icon-active').removeClass('icon-active');
    $('.icon', this).addClass('icon-active');
})
.icon-active {
    background-color: green;
}
.icon {
    width: 10px;
    height: 10px;
    display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>table 1 a <span class="icon"></span></td>
    </tr>
    <tr>
        <td>table 2 b <span class="icon"></span></td>
    </tr>
    <tr>
        <td>table 3 c <span class="icon"></span></td>
    </tr>
</table>

Answer №2

Utilizing the removeClass() and addClass() functions in jQuery allows you to achieve this functionality.

1) Start by removing the class from all spans.

2) Then, add the class to the specific span that is clicked.

$('tr').click(function(){

$('span').removeClass('icon-active');
$(this).find('span').addClass('icon-active');
});
.icon-active {
  background-color:Blue !important;
  display:inline-block;
}

span.icon
{
  height:10px;
  width:10px;
  background-color:red;
    display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>table 1 a <span class="icon"></span></td>
</tr>
<tr>
<td>table 2 b <span class="icon"></span></td>
</tr>
<tr>
<td>table 3 c <span class="icon"></span></td>
</tr>
</table>

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

`Uniform background color across all pages`

My goal is to allow customers to select a color that will persist across different pages on the website. The code below shows how users can choose a color on the first page: <select id="color" style="width: 5%; height: 10%" size="5"> ...

javascripthtmlcssasp.net

Creating a Node.JS application, developing an Express JS API, and handling errors

I am facing challenges while developing a REST API in Express.js and I am seeking assistance. Below is my Express.js code: router.get( '/apps/download/:downloadId', function ( req, res, next ) { const opts = Object.assign( {downloadId: re ...

javascriptjsonnode.jsapiexpress

Eclipse - enhancing outline view by utilizing require.js define(...)

My code is structured within the define(...) function in the following format: define(['angular'], function(angular) { function foo () { console.log("Hi") ; } function foo2 () { console.log("Hi") ...

javascripteclipseangularjseclipse-pluginrequirejs

Tips for replacing div content using $.ajax similar to $.postWould you like to learn how

The Challenge: I need assistance in converting my existing code from using $.post to utilizing $.ajax for better synchronization and displaying a message until the request is completed. I am particularly interested in learning how I can achieve this usin ...

c#jqueryjsonasp.net-mvc-3

How can JavaScript transform Unicode strings?

<i class="icon">&#xe672;</i> This code will display an icon like this: > However, when I render it in Vue: <i class="icon">{{a}}</i> a = '&#xe672;' The result is  It displays as a string! ...

javascriptvue.js

Tips for formatting JSON using jQuery

Imagine my JSON data with 3 different sets of information: [ { "Pair":"", "Id":"8ca2df56-2523-4bc3-a648-61ec4debcaaf", "PubDate":"/Date(1463775846000)/", "Provider":null, "Market":"" }, { "Pair":"", ...

javascriptjqueryhtmlcssjson

Javascript timer that counts down using cookies for storage

Seeking assistance - I am in search of a solution to create a javascript countdown timer that utilizes cookies. I need the timer to remain consistent even when the user refreshes the page, until a specific time has elapsed. This is for an online examinat ...

javascriptalert

The Redux Toolkit Slice Reducer fails to function properly when incorporating an extra Reducer that is not compatible

I am relatively new to the world of Redux and have been attempting to use RTK right from the start. It has been quite a challenging and confusing experience for me so far. Recently, I decided to include a standard Reducer instead of an extraReducer in my ...

javascriptreactjsreduxredux-thunkredux-toolkit

Looking for Sha1 encryption functionality in jQuery or JavaScript?

I am currently using sha1 encryption coding in PHP <?php echo hash('sha1', 'testing'.'abcdb'); ?> However, I need this encryption to work on a page named xyz.html, causing the current block of code to not function prop ...

javascriptjquerysha1

Transferring information from AJAX to PHP script with the click of a button

Simply put, I am in the process of adding a pop-up update panel to my to-do website using an HTML button. The website already has a login-register system and uses MySQL queries to display different tables for each user. The update buttons on the website c ...

javascriptphpjqueryajax

Troubleshooting: Issue with dynamically updating innerHTML of element using AJAX in response to selection input change event

I'm facing a challenge in retrieving the value of a product from a database based on user selection in a <select> element and displaying this value using AJAX in another element. When I directly access precio.php?q=PRODUCTO%201, it returns the d ...

javascriptphpajaxonchange

A missing semicolon is encountered while compiling a React application

I am currently working on my app using Create React App and incorporating scss. I have used a vscode plugin to convert the scss to css, but I keep encountering an error when running npm run build. The error message reads as follows: [email protected ...

cssreactjssassbuild

Strange spacing in Angular Material checkbox

I have a container with an angular material checkbox inside. The background of the container is black, so I changed the background color of the checkbox to white for visibility. However, there seems to be some unwanted spacing on the right side of the chec ...

htmlcssangularjscheckboxangular-material

Troubleshooting Full Screen Problems with Three.js

Despite my efforts to troubleshoot, I am still encountering a frustrating issue with the Three.js API. Even after thoroughly studying the API documentation, browsing through StackOverflow questions, and using debugging tools like firebug and chrome's ...

javascripthtmlfullscreenhtml5-canvasthree.js

Tips for verifying the input field with specific requirements in Angular 6

There is an input field that needs to validate text based on certain logic conditions: No spaces should be allowed in the formula. The operators (and,or) must be lowercase and enclosed in curly brackets {}. The number of opening '(&apos ...

javascriptjqueryangularregex

Tips for accessing the reference of a child when it is a functional component

Trying to implement a Higher Order Component (HOC) to access the ref of any component. It works perfectly fine when regular JSX is passed, but encounters issues when a functional component is passed: class GetRef extends React.Component { state = {}; ...

javascriptreactjsreact-hooksuse-ref

Inappropriate functionality of jQuery Code

Take a look at Demo Gallery I'm encountering some bugs that I can't seem to resolve. In Safari, there's a flickering issue when hovering over other elements In Safari and Chrome, the images are not displaying at the correct size (270x128) ...

jqueryhtmlcss

Getting a boolean response from an asynchronous SQLite query in Express

I am currently developing a middleware that verifies the validity of a session (meaning it has a logged-in user attached). For this purpose, I am utilizing sqlite3 for node.js. Since I am not very familiar with JavaScript, I am facing some challenges figu ...

javascriptexpresscallbackreturnnode-sqlite3

Request Fancybox from parent document within an iframe

I have two pages, my index.html and social.html. I recently cleaned up my index.html file and left only the necessary jQuery code for using fancybox. My goal is to display images from social.html within fancybox when clicked on, but it should open in index ...

jqueryhtmliframefancybox

JSON isn't transmitting any information

Having an issue with Json that's puzzling me. I'm using ajax to call a Controller method that takes a string as input and returns a List of my defined class. The json call is triggered by a dropdown menu change, loading the corresponding fields ...

c#jqueryasp.netajaxjson