Deselect any uncertain options

I'm facing a situation where I have a table that is logically divided into two halves, and I need to select only half of a row as shown in the image.

The challenge arises when I want to choose a different "half" row - in this case, I need to deselect the previously selected one. Below is the code snippet I am currently working with:

<tr class="line1">
    <td width="10" class="td3523" onclick="selectme('3523');">
        <input type="radio" name="selattendance" id="tr3523" onClick="setEditDelete(3523)"/>
    </td>
    <td width="100" class="td3523" onclick="selectme('3523');">2012-11-19</td>
    <td width="125" class="td3523" onclick="selectme('3523');">
        <table width="100%" cellpadding="0" cellspacing="0" style="border: 0;padding: 0;border-collapse: collapse">
            <tr> 
                <td style="width: 50%;padding-right: 10px;border: 0" align="right" valign="middle">22:54</td>
                <td style="width: 20%;border: 0">     <a href="#" onclick="loadPic('attendanceimages/39286a0a6b45cae9f116b11882f36046.jpg','2012-11-19','2012-11-19','add','','In','22:54:04','22:54:04');"><img src="images/punchimg.png"></a>
                </td>
                <td style="width: 20%;border: 0">&nbsp;</td>
            </tr>
        </table>
    </td>
</tr>

Currently, my click event on any td selects all tds with the same ID using the following JavaScript function:

function selectme(id) {
    $('.td' + id).toggleClass("ui-selected");
}

To enhance this functionality, I believe I need to add a line of code to remove the "ui-selected" class from previously selected tds. How can I achieve this? Thank you.

jquerycssjquery-uiselectable

Answer №1

Try assigning a new class to your <td> elements, such as tdclss, and then utilize it within your function to eliminate the ui-selected class.

function chooseItem(id) {
  $('.tdclss').removeClass("ui-selected");
  $('.td' + id).toggleClass("ui-selected");
}

Answer №2

Here's a suggested method:

$('input:radio').change(
    function(){
        // Saving jQuery $(this) object as 'that'
        var that = $(this);
            that
                // Locate the nearest table ancestor element
                .closest('table')
                // Look for '.selected' elements within that table
                .find('.selected')
                // Remove the 'selected' class from those elements.
                .removeClass('selected');
            that
                // Go to the parent td element
                .parent()
                // Select subsequent siblings *until* an element matching the selector is found
                .nextUntil($('td:has("input:radio")'))
                // Add back the current td element to the collection
                .andSelf()
                // Add the 'selected' class
                .addClass('selected');
    });​

JS Fiddle demo.​

Related Resources:

Answer №3

Having multiple fields with identical IDs is a recipe for disaster at some point. It's better to utilize class attributes to organize the cells, or potentially employ a <span> element to group them together (even though I have yet to test a <span> within a <tr>).

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 best way to create a "select all" check box in HTML and display the selected values in a div?

$(function () { //This function selects all checkboxes and unchecks selectall if any checkbox is not checked. var checkall = $('#checkall'); var boxes = $('input[type="checkbox"]').not(checkall); checkall.click(function ...

jquerycssxhtml

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...

htmlcss

The Bootstrap form validation success message is failing to appear

I'm struggling with bootstrap form validation as the success message does not appear after submitting the form. I have a PHP mail function script that displays 'thank you' in a new page upon submission, even though I have included return fal ...

phpjquerytwitter-bootstrapbootstrap-4

What is the best way to update a Textfield in each row of a table using PHP and AJAX when a different textfield in the same row is changed

My JavaScript code adds a row with two cells to a table when a button is clicked. One cell contains a livesearch textfield, and the other cell has a quantity textfield whose value is supposed to dynamically change based on the livesearch results. I'v ...

javascriptjqueryajaxformsevent-handling

Word wrapping in CSS results in excessively large gaps between individual words

Hey there! I'm experiencing an issue with text wrapping when the window is resized. Even though I have added CSS code to make it wrap nicely within its container, it doesn't seem to be working as expected: article { overflow: auto; word- ...

htmlcsswhitespaceword-wrap

Animations in jQuery become glitchy on Internet Explorer versions 8 and below

Check out my website: The functionality is smooth on firefox, chrome, and safari as well as ie9, but encounters issues in IE8 and 7. Upon clicking an image, it enlarges while collapsing any other expanded images. The problem seems to lie with the jQuery ...

jqueryinternet-explorer

Creating equal height Bootstrap 5 cards within card-columns using owl-carousel

I'm having trouble ensuring that all the images in my carousel have the same height. Despite trying to use the h-100 class, the heights still vary. Changing the content within the p tags also affects the size of the images. Here's a snapshot: the ...

htmlcssbootstrap-5owl-carousel

Preventing a user with the same name as the one in the table from being added by utilizing a jQuery contains check proved

Check out my fiddle here: http://jsfiddle.net/jd5pgdz2/4/ I encountered an issue when attempting to add a user with the same name as one already in my table (the displayed users are static in the HTML). Despite using 'contains' to check if the u ...

jqueryhtml

Utilizing a form on numerous occasions prior to its submission

As a newcomer to JavaScript, I am exploring the best approach for a specific task. The task involves a form with checkboxes representing different music styles and a selector for names of people. The goal is to allow users to select music styles for mult ...

javascriptjquerydjangoformsjavascript-databinding

The functionality of the jQuery function is disrupted when I navigate to a different page/row or perform a search for specific items

Recently, I created a JQuery function that deletes the selected row. Although I am aware of the DataTables option available for this purpose, I chose to implement it myself using just JQuery and JSON without relying on AJAX. However, a problem arises when ...

phpjqueryjsondatabasedatatable

Prevent the end of the scroll from causing a new scroll to start?

In the code snippet provided, there are two divs. When scrolling down past the end of the blue div, the overall body/div also scrolls down. Is there a way to prevent this additional scrolling effect once reaching the scroll boundary of the blue div? For e ...

javascripthtmlcss

Issues arise when using Telerik MVC Controls with the most recent version of JQuery (1.7.1), as client events do not get triggered

After the latest update to JQuery 1.7.1, my Telerik MVC Controls are no longer raising client events. Upon updating to JQuery 1.7.1, I have noticed that all my telerik controls are failing. I'm hoping someone can confirm that this issue is not isola ...

jqueryasp.net-mvcteleriktelerik-mvc

Running Jquery after the DOM has loaded in an Angular Js environment can be achieved by utilizing specific

When developing a single page application with Angular, I have implemented multiple views that load various page content. My goal is to set the initial focus on the first input element for all screens using an Angular script, instead of manually adding the ...

jqueryangularjs

Aligning text vertically centered within a div

Check out an example of my code here: Jsfiddle <div id="gameTimeBar-holder"> <div id="gameTimeBar"></div> <div class="progressBarText">Actions : 852 minutes</div> #gameTimeBar-holder{width:200px;height:15px;background:grey ...

htmlcss

Differences in vertical font positioning between Mac and Windows systems

One element on my page is a quantity balloon for a basket, but I'm struggling to get it looking right. The font and vertical position don't seem to be cooperating for such a simple element: https://i.sstatic.net/IfSi6.png Despite trying solutio ...

cssfontscross-platformvertical-alignment

unable to load()

I am currently in the process of converting frames to div elements. My approach involves using jQuery's load() method, but I have encountered an error that has me stumped. The code snippet below is where the issue resides. Any assistance would be grea ...

jqueryhtmlcss

Altering the hover functionality for dynamically created class elements

I have a vision to create a unique e-commerce storefront with tile design, featuring an item thumbnail that reveals the item name upon hovering. I found inspiration from this example, but I want the item name to slide up smoothly on hover, rather than simp ...

javascriptjqueryhtmlcsshover

sending arguments to the event handler function

It seems like I may be overlooking some basic concepts of JavaScript events. Could someone kindly explain why these two calls are returning different results? // 1 $(window).on('load', function(){ spiderLoad(); }); and // 2 $(window).on(& ...

javascriptjquery

Choosing between Method and Basic JS: When to opt for toString, parseInt, or jQuery?

I've often pondered this question ever since coming across the toString() function, but have never taken the time to inquire. Is it more beneficial to use basic JS or should I stick with a function that essentially accomplishes the same task? While I ...

javascriptjquerystring

Tips for creating a unique custom UI headline using ReactJS, CSS, and bootstrap

Looking to create a design that is responsive in ReactJS using Bootstrap or CSS if needed. I need assistance with placing separators between columns and ensuring the values of each label are aligned in the same column but on the next line. The layout shoul ...

javascriptcssreactjsflexboxbootstrap-5