What is the reason for the missing element in the table?

Displayed below is a table containing rows (tr).

I am attempting to reset the background color for all table rows:

 for (var i = 0; i < rows.length; i++) {
          if (rows[i].hasAttribute("background-color")) {
            rows[i].style.backgroundColor = "transparent";
            
          }
        }

An example of a row is as follows:

<tr style="background-color: rgb(232, 229, 216);">

Answer №1

To determine if a style is set, check its value and nullify it if true:

const rows = document.querySelectorAll('#demo tbody tr')

for (let row of rows) {
  if (row.style.backgroundColor) {
    row.style.backgroundColor = null;
  }
}
<table id="baseline">
  <tbody>
    <tr style="background-color: red"><td>Foo</td></tr>
    <tr style="background-color: blue"><td>Bar</td></tr>
    <tr style="background-color: green"><td>Baz</td></tr>
  </tbody>
</table>

<table id="demo">
  <tbody>
    <tr style="background-color: red"><td>Foo</td></tr>
    <tr style="background-color: blue"><td>Bar</td></tr>
    <tr style="background-color: green"><td>Baz</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

Having trouble converting the file to binary format in order to send it to the wit.ai api through node.js

I am having trouble converting an Audio file to Binary format for sending it to the Wit.AI API. The node.js platform is being used for this purpose. On the front-end, user voice is recorded using the Mic-recorder Module. Any guidance or suggestions would b ...

Trouble with AngularJS: Updates not reflecting when adding new items to an Array

I am facing a persistent issue that I have been unable to resolve, despite researching similar problems on StackOverflow. My current project involves building an application with the MEAN stack. However, I am encountering difficulties when trying to dynam ...

JavaScript is unable to post content or access elements

Check out the following code: <div class="col-2"> <div class="input-group"> <label class="label">Name</label> <i ...

What could be causing the span class data to not be retrieved by the getText method

Looking to retrieve the value of a span class called 'spacer-right big project-card-measure-secondary-info' <span class="spacer-right big project-card-measure-secondary-info">1</span> snippet of code: browser.waitForEl ...

The blueimp fileupload feature is failing to activate the progress tracker

My upload script is simple, but it seems to be having issues with triggering the progress. It only triggers the progress method once, and when the file is done uploading, it triggers the complete method and prints done! Chrome 58.0.3029.110 (64-bit) Firefo ...

converting the names of files in a specific directory to a JavaScript array

Currently working on a local HTML document and trying to navigate through a folder, gathering all the file names and storing them in a JavaScript array Let's say I have a folder named Videos with files like: - VideoA.mp4 - VideoB.mp4 How can I cre ...

Guide on submitting a pre-filled form with data pulled from an array of objects using vue

My current school project involves creating a web app for dog walkers. I am currently working on a form to update the information of dogs owned by a user. This data is stored in an array of objects, where each object represents a dog's information. I ...

What are the best practices for integrating QML with Java?

How can QML be interfaced with Java when developing the GUI and API for a linux based device? ...

The image momentarily pauses as the arrow keys are switched

I have a query regarding the movement of the main player image. While it generally moves smoothly Left or Right, there is an issue when quickly switching directions from right to left. When the left key is pressed while the right key is still held down, th ...

Fetching image files from Angular JS in a servlet

On my website, users have the ability to upload images. I am using AngularJS to post the data to a specific URL via a POST request. My question is, how can I retrieve this data in a Java servlet? My goal is to save the uploaded image in a database. Is this ...

Customize Bottom Navigation Bar in React Navigation based on User Roles

Is it possible to dynamically hide an item in the react-navigation bottom navigation bar based on a specific condition? For example, if this.state.show == true This is what I've attempted so far: const Main = createBottomTabNavigator( { Home: { ...

The system is unable to locate the command "nvm"

Lately, I've been experimenting with using nvm to manage different versions of node. After successfully installing nvm on my Mac OS Catalina(10.15.6), I was able to easily switch between versions through the terminal. However, when attempting to do t ...

What is the method for passing the Rating field value in Vue.js?

Here is the structure of my form: <form id="enquiryBox" method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);"> <div class="modal-body brbottom-20"> <div class="clearfix"> < ...

What causes the high memory consumption of the 'readdirSync' method when handling directories with a large number of files?

Consider the NodeJS code snippet below: var fs = require('fs'); function toMb (byteVal) { return (byteVal / 1048576).toFixed(2); } console.log('Memory usage before "readdirSync" operation: ', toMb(process.memoryUsage()['heap ...

How to Handle Non-Conventional JSON Parsing in AngularJS

When retrieving a JSON response from a Restful service, the format may not always be accepted by Angular. For example: { "comments":{ "columns":[ "clientId", "treatmentDate", "comments", "photo", "pra ...

NextJS was throwing a warning at me, while Firebase hosting was giving me an error regarding the absence of unique keys for children in lists, even though I

I've been troubleshooting this warning for quite some time, but I can't seem to resolve it. The warning reads as follows: Warning: Each child in a list should have a unique "key" prop. Check the top-level render call using <ul>. ...

I'm looking to create an array of tags that contain various intersecting values within objectArray

Initially const array = [ { group: '1', tag: ['sins'] }, { group: '1', tag: ['sun'] }, { group: '2', tag: ['red'] }, { group: '2', tag: ['blue'] }, { grou ...

Python Scrapy: Extracting live data from dynamic websites

I am attempting to extract data from . The tasks I want to accomplish are as follows: - Choose "Dentist" from the dropdown menu at the top of the page - Click on the search button - Observe that the information at the bottom of the page changes dynamica ...

What steps should be followed to properly validate an unsubmitted form in Angular?

To ensure that the user submits the form before navigating to another page, I want to implement a feature where an error dialog pops up if the user types in the form but hasn't submitted it yet and tries to click a link to go to a different page. How ...