Preventing clicking on minute cell

check out the fiddle

I am working with an HTML table that includes a textbox and a button. I need to enable cell selection by dragging on the cell. When the button is clicked, I want to retrieve the value from the textbox and display it in a span tag within the selected cell. Additionally, I need to prevent clicking on certain cells (specifically those at 0, 15, 30, and 45 minutes intervals). In the provided fiddle, you can see that when clicking on these minute cells, their CSS turns green and the CSS length increases (as indicated in the alert).

jqueryhtmlcss

Answer №1

Is this the solution you are looking for?

--UPDATED--

Currently, the highlighting feature only works in a vertical manner (up or down). Although there may be a more sophisticated approach to achieve this functionality, I believe this method will meet your requirements.

DEMO: http://jsfiddle.net/vrW2n/9/

// Include this variable    
var lastRow = 0;

Inside mousedown():

    // This code retrieves the index of the first clicked row.
    lastRow = $(this).closest("tr")[0].rowIndex

    active = true;
    $(".csstdhighlight").removeClass("csstdhighlight"); // remove previous selection

    //This is the key step
    $(".temp_selected").removeClass("temp_selected");
...

And within mousemove():

...
    /* Start my modification
    Compares the current 'mousemove' row index
    with the previous and next row indexes
    */
    var thisRow = $(this).closest("tr")[0].rowIndex;

    if( lastRow == thisRow || lastRow == thisRow - 1 || lastRow == thisRow + 1 ){
        lastRow = $(this).closest("tr")[0].rowIndex;
    }else
        return;
    // End my modification
...

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

Determining the lowest and highest values for a slider's range

I am looking to extract the minimum and maximum values from a price range. Here is the code snippet for reference: http://jsfiddle.net/dhana36/b453V/2/ Currently, I have one input field that controls both minimum and maximum values. However, I would pref ...

javascriptphpjqueryhtmlajax

What's the best way to ensure my website's footer spans the entire width of the webpage?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Elena Brown | Graphic Designer</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href=' ...

htmlcss

Accessing data with Ajax using functions outside of the Ajax function

Is there a way to access variable data from an external source in my code? Any assistance would be greatly appreciated. ...

jqueryajax

I'm experiencing an issue with the button not working when I switch to Tablet or Mobile size. How can I go about resolving this problem

<!-- Navigation Bar --> <nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="">tindog</a> <button class="navbar-toggler" type="button" data-bs-togg ...

htmlbootstrap-5

Creating a responsive carousel that is not yet designed

As a beginner, I'm facing what seems like a simple problem that I just can't solve. Here is the HTML code I've written: <div class="discs container"> <ul> <li><div class="arrowleft"><a href="#" >< ...

htmlcss

Angular integration of Jquery UI datapicker with read-only feature

Having trouble using ngReadonly within a directive, my code isn't functioning as expected: app.directive('jqdatepicker', function() { return { restrict: 'A', require : 'ngModel', link : functi ...

javascriptjqueryangularjs

Display a selection list with an array through jQuery

I want to dynamically populate a dropdown select using an array through jQuery. Check out the code snippet below: // Create a dropdown list with numbers var numbers[] = { 1, 2, 3, 4, 5}; $.each(numbers, function(index, value) { ...

jquery

What causes the parameter to be null when jQuery AJAX sends Content-Type=application/json to an MVC Controller Action method?

Apologies for asking a question that has been addressed multiple times before, but I am unsure if the answers from those discussions are still relevant with the latest versions of ASP.NET Core MVC and jQuery. My MVC controller method accepts a class objec ...

jqueryjsonajaxasp.net-corepost

Receiving mySQL error message using jQuery & AJAX

After successfully inserting data into mySQL, I am experiencing an issue with error handling. When I intentionally break the Insert statements, mySQL crashes but the front end still displays a success message. What mistake am I making? AJAX function po ...

jquerymysqlajax

Having trouble with your custom accordion content in React JS not sliding open?

Check out my progress so far with the fully functioning view here This is the structure of the Accordion component: const Accordion = ({ data }) => { return ( <div className={"wrapper"}> <ul className={"accordionList ...

javascriptcssreactjs

Unable to make cross-domain AJAX request with Sinatra - attempting to send JSON using jQuery's ajax function

Currently, my sinatra app on the server has the following configurations: before do headers 'Access-Control-Allow-Origin' => '*', 'Access-Control-Allow-Methods' => ['OPTIONS', 'GET', &apo ...

jqueryajaxsinatra

What could be causing some of my AngularJS data bindings to malfunction?

I have been tasked with converting a website to Angular JS 1.5.7, but I am encountering issues with data bindings. Initially, the data binds correctly when I start the server and serve the files. However, upon reloading the page, the binding no longer wor ...

javascripthtmlangularjs

An undefined PHP index error was encountered by Ajax, while the other one did not face the same issue

I encountered an issue with ajax where I am receiving an undefined index error on my variables when making a call. Strangely, I have other ajax calls functioning perfectly fine across my website except for this particular one which is giving me troubles. I ...

phphtmljqueryajax

Choosing CSS/JS selector: Pick the final element with a class that does not match

My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class. I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuer ...

javascriptcssselectelement

Obtain the row ID from a database by selecting checkboxes

I am facing a challenge when trying to remove a row from my MS Access database using checkboxes on my JSP page. Each row in the displayed database has a checkbox, but I am struggling to retrieve the rowId and link each checkbox with its respective row. Any ...

javascripthtmljspcheckbox

Trigger the onClick event of an element only if it was not clicked on specific child elements

<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...

javascripthtmlcssreactjsfrontend

Internet Explorer 9 crashing when using a jQuery file change event

Here is the HTML code snippet I'm working with: <div class="s-field" id="fileBox"> <div style="display: block; width: 100px; height: 20px; overflow: hidden;"> <button style="width: 110px; height: 30px; position: relative; top ...

jqueryasp.netinternet-explorer

Anticipated the presence of a corresponding <tr> in the <table> within the server HTML, but encountered hydration failure due to discrepancies between the initial UI and the server-rendered content

Next.js Version 13.2.3 In Next.js, it is advised not to use the table element. "use client"; export default function index() { return ( <table> <tr> <th>Company</th> ...

htmlreactjsnext.jshtml-tableserver-side-rendering

Can Google Charts columns be customized with different colors?

Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...

javascripthtmlcsschartsgoogle-visualization

The submission of POST request data is failing to be added to the MySQL database

After making the post request below, everything appears to be working fine. When I check the developer tools under network, all parameters are being posted successfully. However, upon execution of insert.php, nothing gets added to the database and there ar ...

phpjquerymysql