The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data submission within the popup, the color of the row where the interaction occurred should change. All elements in the table, including rows and cells, are already assigned IDs and style classes.

To accomplish this, I have attempted several methods:

1.

window.opener.document.getElementById('rowId'+lineNumber).style.backgroundColor="#00FF00";

2.

window.opener.document.getElementById('rowId'+lineNumber).className="innerrowcss";

3.

 var tbl = window.opener.document.getElementById('linesTableId');
 tbl.rows[lineNumber].style.backgroundColor="#00FF00";

or

tbl.rows[lineNumber].style.className="innerrowcss";

Unfortunately, none of the above approaches have been successful in changing the color of the desired row. I would greatly appreciate any assistance in achieving this functionality.

Thank you, Eshwari

javascripthtmlcss

Answer №1

Does adding rowID + lineNumber equal the tr? No, this method doesn't seem to be effective. Let's instead search for the <td> element inside.

var id = 5;
var elements = document.querySelectorAll('table .rowId' + id + ' td');
// Iterate through all <td> elements and change their background color
for( var j = 0, length = elements.length; j < length; j++) {
  elements[j].style.background = 'blue';
}
<table>
  <tr class="rowId1">
     <td>row 1</td><td>row 1.1</td>
  </tr>
    <tr class="rowId2">
     <td>row 2</td><td>row 2.1</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

"Implementing a responsive design with a background image and radial gradient - how to

The image currently in use: https://i.stack.imgur.com/piK6l.jpg Here is how I've implemented it using Vue.js, Bootstrap, and CSS: Code Snippet <div class="landing"> <div class="container text-white details h-100"> ...

htmlcssvue.jsbootstrap-4radial-gradients

"Collaborative Drive" assistance within Google Apps Script

Currently, I am developing a JavaScript tool within Google Apps Script to analyze various document properties such as the validity of links and correct permissions settings. To achieve this, I have been utilizing the API outlined in https://developers.goog ...

javascriptgoogle-apps-scriptgoogle-drive-apigoogle-drive-shared-drive

What is the best method for applying a style specifically to controls located on the lower part of the

I am currently working on designing a table in a webpage and need to set styles for the <td> tags. Is it possible to apply different styles to the upper and lower cells? Can I use a <style> that specifically targets the bottom <td> tags? ...

htmlcss

What sets apart .ejs from .html files?

In my Node Js project, all front end files are in .ejs format and call the server.js for backend work. 1) Is there additional functionality provided by ejs compared to html? 2) Does this pertain to expressJs functionality in Node? 3) Can I use angularJs ...

javascriptangularjsnode.jsexpress

What solutions are available to resolve the routing problem in React.js?

On my fourth day working with Node and React.js, I am creating a custom offline search function for Docusaurus 2. I've built a JSON index and implemented a search function using elasticlunr. My goal is to redirect to a separate results page, but I&apo ...

javascriptnode.jsreactjsdocusaurus

Cleaning up HTML strings in Angular may strip off attribute formatting

I've been experimenting and creating a function to dynamically generate form fields. Initially, the Angular sanitizer was removing <input> tags, so I discovered a way to work around this by bypassing the sanitation process for the HTML code stri ...

javascripthtmlangulartypescript

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

javascripthtmlcssangularangular2-template

Utilizing Vue.js for Keyboard Binding

I'm brand new to coding and Vue, and I've hit a roadblock in my project. I'm creating a JavaScript calculator that needs to be usable both with a mouse and keyboard. While I've managed to make it work with the mouse, I just can't ...

javascriptvue.jscalculator

Having trouble understanding the differences between Bootstrap 4's .list-inline class and .list-inline-item class?

I am currently utilizing Bootstrap 4 within Wordpress. Strangely, I am facing an issue where I am unable to have list items appear inline (horizontally) solely by using the class .list-inline on the list itself, as shown below: <ul id="dances" class="l ...

htmlcsswordpressbootstrap-4

Ways to delete a class if it currently exists?

Is there a way to manage multiple toggle classes within a single div? It can be frustrating when clicking the maximize or close button triggers the minimize function as well. How can this situation be addressed? Is there a way to manage multiple toggle cl ...

javascriptjquery

Library for adjusting the x axis scaling accurately

I need to find a JavaScript chart library that can support lines and zooming for handling a large amount of data. One issue I have encountered with other libraries is scaling the x-axis based on date and time data provided in strings: y=[43,56,34,63....] ...

javascripthtmlcharts

Can someone explain the function of statements such as (function () { // code; }.call(this)); within a JavaScript module?

By utilizing the Function.prototype.call() method, it becomes possible to create a function that can be applied to various objects. I delved into the code of , which had been minified and required to be un-minified for examination. The structure of the co ...

javascripthtmlnpmminifiedjsfunction.prototype

How to enable Autocomplete popper to expand beyond the menu boundaries in Material UI

Within my Menu component, I have an Autocomplete element. When the Autocomplete is clicked, the dropdown list/Popper appears but it's confined within the Menu parent. How can I make it so that the Autocomplete's dropdown list/Popper isn't re ...

javascriptreactjstypescriptmaterial-ui

Conceal the iframe if the source is http:// and there is no associated

Is there a way to hide the iframe only if the src starts with "http://"? This is what I have tried so far: <script type="text/javascript> if ( $('iframe[src^="http://"]') ) document.getElementById('iframe').style.d ...

javascriptjqueryhtmliframe

Why is the server displaying a blank white page following the import of Material UI icons/module?

Here is the code snippet I am working on: import React from 'react' import "./Chat.css" import { Avatar, IconButton } from "@material-ui/core"; import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined'; imp ...

javascriptreactjsmaterial-ui

Manipulating selected values in VueJs v-select using methods

I am currently working on achieving the following goal: When I select the option "Alle openstaande" (result_id = 0), I want to select all these result_ids: [-1,-2,-3,-5,-7,-8,-11,-12] and deselect result_id 0. The variable mergedResults stores an array o ...

javascriptlaravelvue.jsvuetify.jsv-select

Unable to retrieve obj after using $location.url

I am working with two different views. In the first view, I call a function from the admin controller using AngularJS: <a ng-click="updateAdmin(admin)">update</a> The code in the admin controller looks like this: $scope.updateAdmin = functio ...

javascriptangularjs

What could be causing my Material UI Divider to appear invisible within a Material UI Container or Paper component?

Hey there! I am absolutely smitten with Material UI - it's incredibly versatile. However, I'm facing a bit of trouble with the Material UI Divider not displaying when nested within either a Container or Paper component. I've looked into it ...

javascriptreactjsmaterial-uidivider

AngularJS - Not binding $scope to the DOM

Recently starting out with Angular, I decided to practice by creating a simple website. One of the features I want to include is displaying the number of times a button has been clicked through data binding. Here's the controller code I've writte ...

javascriptangularjsscope

Trouble with uploading images through multer is causing issues

When setting up multer, I followed this configuration let multer = require('multer'); let apiRoutes = express.Router(); let UPLOAD_PATH = '../uploads'; let storage = multer.diskStorage({ destination: (req, file, cb) => { ...

javascriptnode.jsexpressionic-frameworkmulter