Learn how to dynamically highlight a table row when any changes are made to it using jQuery

Is there a way to automatically highlight the current table row when any input text or image is changed within that specific row using jQuery? In the given code snippet below, with two rows provided, how can one of the rows be highlighted upon modifying the input text or changing the image through a keypress event or any other method?

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <textarea class="form-control"></textarea>
      </td>
      <td>
        <div class="browse-chg-img">
          <img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
          <div class="overlay">
            <div class="text" style="font-size: 10px;">Change Image</div>
          </div>
        </div>
      </td>
      <td>
        <button type="button" class="btn btn-primary">Save</button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>
        <input type="text" class="form-control">
      </td>
      <td>
        <textarea class="form-control"></textarea>
      </td>
      <td>
        <div class="browse-chg-img">
          <img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
          <div class="overlay">
            <div class="text" style="font-size: 10px;">Change Image</div>
          </div>
        </div>
      </td>
      <td>
        <button type="button" class="btn btn-primary">Save</button>
      </td>
    </tr>
  </tbody>
</table>
javascriptjquerycsshtml

Answer №1

Give this a try:

$(document).ready(function() {
  $('td').on('keydown', function(ev) {
    $('tr').css('background-color','');
    $(this).closest('tr').css('background-color','red');        
  });
});

Check out the jsFiddle link for the same functionality.

https://jsfiddle.net/0k8Lu50v/

Answer №2

Enhance the appearance of tr elements with some styles,

<style>
    tr:focus { background: yellow; }
    </style>
    <table>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td><input type="text" class="form-control" ></td>
                                                    <td><textarea class="form-control"></textarea></td>
                                                    <td>
                                                        <div class="browse-chg-img">
                                                            <img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
                                                            <div class="overlay">
                                                                <div class="text" style="font-size: 10px;">Change Image</div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary">Save</button>                                                    
                                                    </td>
                                                </tr>

                                                <tr>
                                                    <td>2</td>
                                                    <td><input type="text" class="form-control" ></td>
                                                    <td><textarea class="form-control"></textarea></td>
                                                    <td>
                                                        <div class="browse-chg-img">
                                                            <img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
                                                            <div class="overlay">
                                                                <div class="text" style="font-size: 10px;">Change Image</div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary">Save</button>                                                    
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </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

Creating a button in HTML that deletes code from a program: a step-by-step guide

Let me illustrate what I'm endeavoring to achieve. Below is the actual code: var info = { labels: ["March", "April"], datasets: [ { label: "Primary Info", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220 ...

phphtmlcss

An issue has arisen where FormData fails to send the value of a

My current issue involves submitting a form using FormData. Interestingly, all input types are functioning as expected except for checkboxes. When the checkbox value is set to 1 or 0, Ajax fails to post it. <form id="update-form" method="PUT" enctype= ...

jqueryajaxlaravel

Prevent parent from scrolling when hovering over a div in HTML5

Unfortunately, the scrolling attribute is not supported in HTML5. I'm facing an issue where I have an svg inside an iframe within a div, and I need to enable scroll functionality within the div while preventing the page from scrolling at the same time ...

javascriptcsshtml

Using the MoveToElement and click functions in Protractor with Node.js for automated browser

Trying to click on a checkbox in our application. I have successfully implemented it in Selenium Java using the code below, but struggling to do the same in Protractor Node.js. Any assistance would be appreciated. Selenium- Java : Actions actions ...

javascriptnode.jsselenium-webdriverprotractor

Moving SVG fill in a continuous loop

After encountering a strange issue not too long ago, I decided to continue my CSS animation experiments with SVG, specifically focusing on colorization. Initially, I thought that applying the animation rules directly to the <g> tag grouping all the ...

csssvgcss-animations

Add a class to alternate elements when mapping over data in React

Check out the code snippet below: <div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4"> {status === "success" && delve(data, "restaurants") && data.r ...

javascriptreactjstailwind-css

Ways to Identify When the Back Button is Clicked

Currently, I am developing an HTML website that contains 4 divs on the index.html page. Initially, when clicking on a div, it would expand while the other sections reduced in width. However, the client requested that the URL should change when clicking o ...

javascriptphpjqueryhtmlangularjs

Utilizing Custom Validators in Angular to Enhance Accessibility

I'm struggling to access my service to perform validator checks, but all I'm getting is a console filled with errors. I believe it's just a syntax issue that's tripping me up. Validator: import { DataService } from './services/da ...

javascriptangulartypescriptvalidation

The Vue.createApp function seems to be malfunctioning, whereas using the new Vue() method is functioning correctly

When running my code, I encountered the following error message: tesyya.js:16 Uncaught TypeError: Vue.createApp is not a function. My code snippet looks like this: const app = Vue.createApp({ data() { return { count: 4 } } }) const vm ...

javascriptvue.jsvuejs2vue-componentvuejs3

Having difficulty inputting password for telnet login using Node.js

When I use telnet from the Windows command line, everything works smoothly: > telnet telehack.com (... wait until a '.' appears) . login username? example password? (examplepass) * * * * * * * Logged... (...) @ (This is the prompt when you ...

javascriptnode.jstelnet

bootstrap navigation bar collapsible menu

Struggling with making the hamburger menu appear on my friend's site. Spent hours trying to troubleshoot, but still can't figure out why it's only showing up as a red box and appearing on larger screens instead of just smaller devices. Frust ...

javascripthtmlcss

Guide on generating a video thumbnail using JavaScript Application

Searching for a way to easily create a thumbnail from a video for uploading alongside the video itself to a server? I've been looking for JavaScript libraries to simplify the process without much luck. The scenario involves the user selecting a video ...

javascripthtmltypescriptvideo

How can we leverage the nullish coalescing operator (`??`) when destructuring object properties?

When working with ReactJS, I often find myself using a common pattern of destructuring props: export default function Example({ ExampleProps }) { const { content, title, date, featuredImage, author, tags, } = ExampleProps || {}; ...

javascripttypescriptoptional-chainingnullish-coalescing

Retrieving the background image URL from inline CSS using jQuery

I'm looking for a link similar to url(img/bg/06.jpg), but when using jQuery, I get a longer link like url("file:///D:/WORKING%20FILE/One%20Landing%20Page/version/img/bg/06.jpg") https://i.stack.imgur.com/8WKgv.png Below is the code snippet in questi ...

jqueryhtmlcss

utilizes arrays using the $.ajax method in jQuery, then transfers them to a PHP endpoint

jQuery(document).ready(function(){ // Setting the data text var dataText = " { name: 'John', time: '2pm' }"; alert(dataText); // Making an AJAX request $.ajax({ type: "POST ...

phpjqueryajaxpost

Align the inner div in the center of the outer div, even when the outer div does not

I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the spee ...

htmlcss

Ancient queries carry the weight of time

Extremely ancient, very old, incredibly aged beyond belief ...

javascripthtmlnode.jsexpress

Find the furthest distance from the average in a set of data points and identify the corresponding data point

Imagine having an array of data structured like this: var data = [{name: "craig", value: 10}, {name: "oliver", value: 15}] My goal is to create a function that can accept parameters like: function findExtremeValue(windowSize, pointsToTake, data, valueAc ...

javascriptarrays

Failed deployment of a Node.js and Express app with TypeScript on Vercel due to errors

I'm having trouble deploying a Nodejs, Express.js with Typescript app on Vercel. Every time I try, I get an error message saying "404: NOT_FOUND". My index.ts file is located inside my src folder. Can anyone guide me on the correct way to deploy this? ...

javascriptnode.jstypescriptexpressvercel

Is there a way to conditionally redirect to a specific page using NextAuth?

My website has 2 points of user login: one is through my app and the other is via a link on a third-party site. If a user comes from the third-party site, they should be redirected back to it. The only method I can come up with to distinguish if a user is ...

javascripttypescriptnext.jsnext-auth