The newly added highlighted CSS in jQuery cannot be removed once an alert is generated

http://jsfiddle.net/Cyjye/ I am a beginner with jquery. I have created an HTML table shown in the jsfiddle link. Initially, the selection should be made from the second row, second cell, but in my HTML table, the selection is being made from the first row, second cell. I only have 30 minutes to spare for this issue. If a user selects more than 30 minutes, an alert saying "Time slot not more than 30 minutes" should pop up. The alert works correctly, however, the added CSS remains even after the alert is dismissed. Whenever I release the mouse button after the alert, the cell is highlighted with CSS, which I don't want. My goal is to remove the recently added CSS when the alert generates and prevent any cells from being highlighted with CSS upon releasing the mouse button. Despite my efforts, I haven't been able to find a solution. When I highlight a 30-minute time slot and click on the "select patient" button (found below the HTML table), the highlight CSS should be removed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Drag selection example</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

        google.load("jquery", "1.3.2");

        google.setOnLoadCallback(function ()
        {
            var active = false;
            var lastActionWasError = false;
            $('#tableAppointment tr td:nth-child(2), #tableAppointment tr td:nth-child(3)').mousedown(function (ev)
          {
                active = true;
                $(".csstdhighlight").removeClass("csstdhighlight"); // clear previous selection
                ev.preventDefault(); // this prevents text selection from happening
                $(".csstdhighlight").removeClass("csstdhighlight");
                $(".temp_selected").removeClass("temp_selected");
                $(this).addClass("csstdhighlight");
                $(this).addClass("temp_selected");
            });

            $('#tableAppointment tr td:nth-child(2), #tableAppointment tr td:nth-child(3)').mousemove(function (ev)
            {
                if (lastActionWasError)
                {
                    $(".csstdhighlight").removeClass("csstdhighlight");
                    $(".temp_selected").removeClass("temp_selected");
                    lastActionWasError = false;
                }
                if (active)
                {
                    $(this).addClass("csstdhighlight");
                    $(this).addClass("temp_selected");
                }
                if ($('.temp_selected').length > 6)
                {
                    alert("Time slot not more than 45 minutes.");
                    $(this).removeClass("csstdhighlight");
                    $(this).removeClass("temp_selected");
                    lastActionWasError = true;
                    return false;
                }
            });
        });
    </script>
    <style type="text/css">
        .csstdhighlight
        {
            background-color: #ccffcc;
        }
    </style>
</head>
<body>
    <table id="tableAppointment" cellspacing="1" width="50%" border="1" align="center">
        <tr>
            <td bgcolor="#ffffff">
            </td>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                <b>Patient Name</b>
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd" valign="top" width="70px">
                8:00AM
            </td>
            <td class="csstablelisttd">
                0
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                15
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                30
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                45
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd" valign="top" width="90px">
                9:00AM
            </td>
            <td class="csstablelisttd">
                0
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                15
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                30
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
        <tr>
            <td class="csstablelisttd">
            </td>
            <td class="csstablelisttd">
                45
            </td>
            <td class="csstablelisttd">
            </td>
        </tr>
    </table>
</body>
</html>
jqueryhtmlcss

Answer №1

If you want to get rid of the highlighted CSS in the previously selected cell, you can try this:

$(this).removeClass("csstdhighlight");
$(this).removeClass("temp_selected");

Check out the JSFiddle example here

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

Pass an array containing an HTML string to the $.post method in jQuery

I have a problem with displaying HTML content fetched from a PHP script using the jQuery $.post method: $.post('{$site_url}tests/tests/content', params, function (data) { $('#some-div1').html(data[1]); $('#some-div2').htm ...

javascriptphpjqueryhtmljson

A guide on implementing jQuery's .delay(1000) method for the same element

I have been attempting the code below without success. $("#mydiv").addClass('spin').delay(1000).$('#mydiv').removeClass('spin'); Do you have any recommendations on how to solve this issue? ...

jquery

The JSColor onChange event is throwing an error indicating that the function is not defined

When attempting to use the onChange event for JSColor to call a function, I consistently encounter an error indicating that the function is not defined. The code snippet below illustrates the issue: export class NavBar extends React.Component { constr ...

javascripthtmlreactjsfunctionjscolor

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

htmlcss

Retrieve information from an HTML input field that does not have an assigned ID or name

I am facing a challenge with an HTML table that contains multiple inputs which do not have any id or name attributes. I need to retrieve data from these inputs but struggling due to the lack of identifiers. Upon inspecting the DOM, I noticed that each inp ...

htmlgoogle-chromedominputelement

Is there a way to switch up the dropdown chevron using only CSS after a click?

Is there a way to change the appearance of dropdown arrows using only CSS and animations when clicked on? I attempted the following method: body { background: #000; } #sec_opt select { /* Reset */ -webkit-appearance: none; -moz-appearance: n ...

javascripthtmljquerycss

Issues with JQuery onclick function on dropdown menu functionality not behaving as desired

Take a look at some example code here. Here's the HTML: <div> HTML<br> <li> <select id="Status" type="text"> <option value="New">New</option> <option value="Complete">Complete</option& ...

jqueryhtml

Ways to modify color while user moves the screen

I'm working with some jQuery code that changes the colors of elements as the user scrolls down, and I want it to revert back to the original color when scrolling back up. However, the script is not behaving as expected... Here is the original working ...

javascriptjqueryhtmlcss

What is the best way to eliminate a specific set of characters from a string using TypeScript?

Imagine you have the following lines of code stored in a string variable: let images='<img alt="image1" height="200" src="image1.jpg" width="800"> <img alt="image2" src="image2.jpg" height="501" width="1233"> <img alt="im ...

htmltypescript

Can you send an array of objects as data in an AJAX post request?

My primary objective is to gather the dropdown values from a webpage and then send them to a PHP file for processing. Currently, I am using jQuery to achieve this by creating an overall schedule array and adding each element to it for updating. Here' ...

javascriptjqueryajax

Creating a straightforward text/logo design for your HTML website?

After creating a standard website using HTML and PHP, I am now looking to add an exciting text/logo effect for when users first visit the site. Essentially, I want the logo to break apart and transition into loading the homepage once a user lands on the si ...

jqueryhtmlflash

Rails: Ensure that JSON form fields remain populated in case the form encounters a validation error

I am using a rails simple form to create a product with three fields inside in order to associate it with appropriate categories: <div class="form-group"> <%= f.input :child_category_id, :collection => @categories.order(:name), :l ...

javascriptjqueryruby-on-railsjsonajax

Are the ajaxSend and ajaxStop events in Jquery not functioning properly?

Having trouble getting the ajaxSend and Stop functions to work properly. I understand that these are global variables, but for some reason I am not able to use them as intended. I never receive an alert when trying to use them in my code. I was hoping to ...

ajaxeventsjquery

Can Puppeteer extract the complete HTML content of a webpage, including any shadow roots?

When using Puppeteer to navigate a webpage, I typically can retrieve the full HTML content as text with this code: let htmlContent = await page.evaluate( () => document.querySelector('body').innerHTML ); However, I am currently faced with ...

javascripthtmlnode.jspuppeteer

Explore a variety of themes for the antd design token

Is there a way to access the text color of both the default and dark themes using design tokens? I am looking for a method to seamlessly switch between the two color schemes based on specific conditions, without having to change the entire theme. For ins ...

cssreactjsreact-hooksthemesantd

Issue with IE7 causing div elements to slide off the screen on specific WordPress pages

Encountering a strange IE7 bug on two pages of a WordPress site I'm currently developing. Some divs are shifting to odd positions, with one completely off the screen: and another here: Additionally, possibly related or not, the "created by" link in ...

htmlcsswordpressinternet-explorer-7

Discover the method for obtaining a selected element in a bootstrap dropdown that is dynamically populated

Similar to the question asked on Stack Overflow about how to display the selected item in a Bootstrap button dropdown title, the difference here is that the dropdown list is populated through an ajax response. The issue arises when trying to handle click ...

javascriptjqueryhtmlajaxtwitter-bootstrap

generate a series of nested divs within one another

I am looking to create a custom nested loop that will generate div elements based on the content of my h1 and h2/h3 tags. I understand this may have been covered in other inquiries, so any guidance would be appreciated :) Here is the initial HTML: <h1& ...

javascriptjquery

Having trouble with my jQuery .hover() code not running as expected

Whenever I hover over my divs, I want them to change color. However, the code doesn't seem to be working as expected when I try to do so. I suspect that the issue might be related to the z-index property used in the class that I am trying to hover ove ...

javascriptjqueryhtmlcssjquery-hover

The battle between Lazy Loading and Infinite Scrolling

Initially, I believed that Lazy Loading and infinite scrolling were the same concept. However, to my surprise, I recently learned that they are actually two distinct elements in web design. Can anyone confirm if this is accurate? ...

jquerylazy-loadinginfinite-scroll