Activate the ability to enter data into a specific cell

I am trying to change the color of an input cell to pink when a user types an incorrect key. Although I can successfully change the color, I am facing difficulty in resetting it after they click on the cell. I have attempted using .prop("disabled", false), but it doesn't seem to work as expected. Can someone guide me on what I might be missing here?

function setUnitField(a) {
$(function () {
    var tbl = $(document.getElementById('21.125-mrss-cont-none-content'));
    var str1 = 'Each';
    var str2 = 'Dozen';
    var str3 = 'Foot';
    var str4 = 'Us Gallon';


    tbl.find('tr').each(function () {
        $(this).find("input[name$='8#if']").keypress(function (e) {
            if (e.which == 13) {
                if ($(this).val() == 'EA') {
                    $(this).val(str1);
                    $(this).css("background-color", "");
                } else {
                    $(this).css("background-color", "pink");
                }

                if ($(this).val() == 'DZ') {
                    $(this).val(str2);

                } 
                if ($(this).val() == 'Ft') {
                    $(this).val(str3);

                } 
                if ($(this).val() == 'GAL') {
                    $(this).val(str4);

                }           
            }
        });
    });



});

}

<input id="grid#21.125#1,8#if" ct="I" type="text" maxlength="3" tabindex="0" ti="0" class="lsTblEdf3 lsTblEdf3NoEllipsis" value="" autocomplete="off" autocorrect="off" name="grid#21.125#1,8#if" onfocus="cellClick('grid#21.125#1,8','true');" onkeypress="cellKeyPress('grid#21.125#1,8',event);" oninput="setCacheValue(this); setUnitField(this);">
javascriptjqueryhtmlcss

Answer №1

Here is a suggested approach:

var str1 = 'Each';
var str2 = 'Dozen';
var str3 = 'Foot';
var str4 = 'Us Gallon';
$('table').find('tr').each(function () {
  $(this).find("input[name$='8#if']").keypress(function (e) {
    if (e.which == 13){ 
      if ($(this).val() == 'EA') {
          $(this).val(str1);
          $(this).css("background-color", "");
      } 
      else if ($(this).val() == 'DZ') {
          $(this).css("background-color", "");
          $(this).val(str2);

      } 
      else if ($(this).val() == 'Ft') {
          $(this).css("background-color", "");
          $(this).val(str3);

      } 
      else if ($(this).val() == 'GAL') {
          $(this).css("background-color", "");
          $(this).val(str4);
      }
      else {
          $(this).css("background-color", "pink");
      }
    }
    else {
          $(this).css("background-color", "pink");
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input id="grid#21.125#1,8#if" ct="I" type="text" maxlength="3" tabindex="0" ti="0" class="lsTblEdf3 lsTblEdf3NoEllipsis" value="" autocomplete="off" autocorrect="off" name="grid#21.125#1,8#if"/></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

Utilizing Cordova for Windows 8.1 in Visual Studio 2015 for external image retrieval and insertion into img tag

I am encountering an issue with displaying external images in a Cordova app. While the DOM is functioning correctly, the images are failing to load. I am specifically trying to resolve this for Windows 8.1 only. In my Cordova project for JavaScript, I have ...

javascriptangularjscordovawindows-8.1visual-studio-2015

Updating the state triggers a re-render in function components

Within this element is an attempt to switch between Celsius and Fahrenheit. There are two functions that handle this conversion and store it in the state. Upon clicking onToggleToFahrenheit, the function performs as expected, but clicking on onToggleToCels ...

javascriptreactjsreact-hooks

What steps can I take to eliminate the warning "Warning: Prop `style` did not match" that appears when I bring in the Image component in Next.js?

Hi there! I'm encountering a warning when trying to import an image using the Image component in nextjs. The warning message reads: Warning: Prop style did not match. Server: "display: block; max-width: 100%; width: initial; height: initial; ba ...

javascriptreactjswebnext.js

Ways to create a clickable anchor tag without using any text

I am currently designing my own website and incorporating links to various social media platforms using icons. However, I am facing an issue where the links are not clickable. For a detailed look at my problem, you can refer to this JSFiddle: http://jsfid ...

javascriptjqueryhtmlcss

What is the best way to identify the position of an element in an array given my specific circumstances

I am trying to utilize the ng-repeat directive in order to display an array. Here is what I have: <div ng-repeat="stu in school"> <div>{{stu.name}}</div> <div>{{stu.grade}}</div> </div> JavaScript $scope.scho ...

javascriptcssangularjs

Picture in the form of a radio button

Is there a way to use an image instead of a radio button in my AngularJS form? I have managed to hide the radio button using CSS, but it disables the checked event. How can I make the image clickable? position: absolute; left: -9999px; Here is the code s ...

javascripthtmlcssangularjs

Node.js equivalent of PHP's SimpleXMLParser

One of the most user-friendly XML reading and writing APIs I've come across is PHP's SimpleXMLElement. For instance, to generate a DOM for the following XML code: <root> <foo> <bar baz="goo"> moo ...

javascriptxmlapinode.js

What is the best way to determine the length of an array using input from an HTML form?

Currently, I am in the process of developing a PHP file and one feature that I would like to implement is creating an array as illustrated in Example 1. As far as my understanding goes, an Array functions like a list where items can be added as shown in Ex ...

phphtmlarraysforms

What is the best way to present information retrieved from a database using ASP.NET and HTML?

I have written a query to fetch a list of items from a database: CREATE PROCEDURE dbo.GetSubjects(@DayComing varchar(10) , @UserId varchar(3)) AS IF EXISTS( SELECT Std_ID FROM Student WHERE Std_ID = @UserID) BEG ...

asp.nethtmlsql

When using equal-width columns in Bootstrap, the columns will be stacked one on top of the other

When I utilize Bootstrap 5, I am encountering an issue where equal width columns are being displayed one underneath the other. To illustrate, here is a simple example directly from the Bootstrap website: <link rel="stylesheet" href="https://cdn.jsd ...

htmlcsstwitter-bootstrapbootstrap-5

How to successfully pass a Bootstrap dropdown value back to Flask

I need assistance with extracting a selected value (player) from a dropdown menu. The goal is to send this 'player' value to Flask upon selection, and then render the corresponding player's image on the website. HTML: <form method="P ...

htmlpython-3.xflaskbootstrap-4

When utilizing the dispatch function with UseReducer, an unexpected error is triggered: Anticipated 0 arguments were provided,

Having trouble finding a relevant answer, the only one I came across was related to Redux directly. So here's my question that might be obvious to some of you. In my code, everything appears to be correct but I'm facing an error that says: Expect ...

javascriptreactjstypescript

The checkbox within the modal popup is failing to trigger the mousedown event on the external popup button

In the world of Drupal, there exists a unique phenomenon known as the modal popup - essentially a dialog box that appears within an iframe. One user found themselves faced with the challenge of triggering a mousedown event on a submit button located outsid ...

javascriptjquerydrupalevent-handlingmousedown

Can JavaScript functions be automated on a web browser using Power BI tables?

I am facing a challenge with saving data from a powerbi table on a daily basis. When I hover over the table and click on the ellipsis menu, a button element is generated in HTML that allows me to save the data to a CSV file using Selenium. However, achiev ...

javascriptpythonseleniumautomationpowerbi

How can I resize or break the overflowing Bootstrap pagination within the parent div based on the resolution?

When utilizing boostrap4 theming for my pagination, a problem arises when loading the page on smaller resolutions than my monitor. The paginate section exceeds the parent div, resulting in an unsightly display. Below is a snippet of my code: <div clas ...

htmlcssbootstrap-4

The Query.formatError message indicates that there is an issue with the 'users.email' column in the where clause of the database query

I'm having some trouble with a piece of code. Here's my signup function : exports.signup = (req, res) => { // Adding User to Database console.log("Processing func -> SignUp"); User.create({ name: req.body.name, username: req.body. ...

javascriptnode.jsexpressjwtsequelize.js

What is the reason for the getter not being able to retrieve the value

I am experiencing an issue with a getter that returns an array of objects. The challenge I face is that I need to display past and current warnings in separate components. The getter currently only retrieves the current warning and ignores any past warnin ...

javascriptvue.jsvuexvuex-modules

Organize the array following the guidelines of a card game with a versatile approach

deck = ['Jack', 8, 2, 6, 'King', 5, 3, 'Queen', "Jack", "Queen", "King"] <!- Desired Result = [2,3,5,6,8,'Jack','Queen','King'] Explore the challenge: Arrange the ...

javascriptreactjs

Conceal the HTTP status code alert in the Chrome developer console

Currently, I have set up a REST API using Express and for authentication, cookies are being utilized. To retrieve user information, I make a GET request to an endpoint that either returns the user info if logged in or a 401 (Unauthorized) status code if no ...

javascriptnode.jsreactjsexpress

What is the best way to align sections side by side using Bootstrap?

Hello, I'm currently trying to customize the layout of this Bootstrap webpage to resemble the design shown in this image https://i.sstatic.net/w7i6Z.png. Specifically, I want to display the blog section and the team section side by side. As a beginne ...

htmlcssbootstrap-4