Implementing specific criteria, append a class to a table using JavaScript

I'm looking for a way to apply the CSS class "bestvalue" to our table dynamically (since I don't have access to the HTML) for all rows with a quantity of 300 or more. This would be the last 2 rows in the example below.

<table class="lb-vd-table">
  <thead class="lb-vd-table-head">
    <tr class="vd-table-head-row">
      <th class="lb-vd-table-head-text">QUANTITY</th>
      <th class="lb-vd-table-head-text">PRICE</th>
    </tr>
  </thead>
  <tbody class="lb-vd-table-body">
    <tr class="lb-vd-table-body-row">
      <td class="lb-vd-table-body-text">100</td>
      <td class="lb-vd-table-body-text"><span class="money">$4.00</span></td>
    </tr>
    <tr class="lb-vd-table-body-row">
      <td class="lb-vd-table-body-text">200</td>
      <td class="lb-vd-table-body-text"><span class="money">$3.00</span></td>
    </tr>
    <tr class="lb-vd-table-body-row bestvalue">
      <td class="lb-vd-table-body-text">300</td>
      <td class="lb-vd-table-body-text"><span class="money">$2.00</span></td>
    </tr>
    <tr class="lb-vd-table-body-row bestvalue">
      <td class="lb-vd-table-body-text">400</td>
      <td class="lb-vd-table-body-text"><span class="money">$1.00</span></td>
    </tr>
  </tbody>
</table>

Do you think using JS would be the most effective method for this task?

javascripthtmlcss

Answer №1

To achieve this functionality, a straightforward JavaScript code can be used. The script iterates through all elements with the class lb-vd-table-body-row. For each row, it locates the first occurrence of lb-vd-table-body-text and converts the text inside to an integer. Subsequently, if the quantity is equal to or exceeds 300, the script applies the bestvalue class to the row.

It's worth noting that the JavaScript is contained within a type="module" script. This ensures that the script executes after the table has been fully loaded. If for any reason you cannot utilize this method, you might need to integrate an event listener for the load event.

<script type="module">
  for (let row of document.querySelectorAll(".lb-vd-table-body-row")) {
    const quantityElement = row.querySelector(".lb-vd-table-body-text:nth-child(1)");
    const quantity = parseInt(quantityElement.innerText);
    if (quantity >= 300) {
      row.classList.add("bestvalue");
    }
  }
</script>

<style>
  .bestvalue {
    color: red;
  }
</style>

<table class="lb-vd-table">
  <thead class="lb-vd-table-head">
    <tr class="vd-table-head-row">
      <th class="lb-vd-table-head-text">QUANTITY</th>
      <th class="lb-vd-table-head-text">PRICE</th>
    </tr>
  </thead>
  <tbody class="lb-vd-table-body">
    <tr class="lb-vd-table-body-row">
      <td class="lb-vd-table-body-text">100</td>
      <td class="lb-vd-table-body-text"><span class="money">$4.00</span></td>
    </tr>
    <tr class="lb-vd-table-body-row">
      <td class="lb-vd-table-body-text">200</td>
      <td class="lb-vd-table-body-text"><span class="money">$3.00</span></td>
    </tr>
    <tr class="lb-vd-table-body-row">
      <td class="lb-vd-table-body-text">300</td>
      <td class="lb-vd-table-body-text"><span class="money">$2.00</span></td>
    </tr>
   <tr class="lb-vd-table-body-row">
      <td class="lb-vd-table-body-text">400</td>
      <td class="lb-vd-table-body-text"><span class="money">$1.00</span></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

I am facing difficulties with the header in CSS as it is not resizing properly

I'm having trouble getting my mobile-first design to work properly because the header doesn't resize in mobile view. I'm satisfied with how it looks in full-screen, but I haven't been able to make any media queries work. You can downloa ...

javascripthtmlcss

Tips for adjusting the placement of a JQuery dialog window

Struggling to adjust the location of the jQuery dialog box by specifying the position in the CSS. However, after making changes in the .css file and refreshing the page, the dialog box fails to appear in the designated position. Currently utilizing jQuer ...

jqueryhtmlcssjquery-ui

Toggle the class of a selected data attribute on another div when clicked

With a click event, I attempt to dynamically add/remove classes by using data attributes on another div. Upon clicking "Text 2," the initial display of "FLAG 1" is set to none, and the background color of "DOT" should change. The association between the t ...

javascriptjqueryhtmlcss

The Jquery css function does not support the setting of CSS3 variables

Hello there, I'm currently experimenting with CSS3 variables to adjust elements and various other things dynamically, but I've run into an issue where JQuery's css method seems to ignore any attempt to set a CSS variable. Here is what I&apo ...

jqueryhtmlcss

Enhancing the pagination look and feel in Laravel 5.1

Is it possible to customize the paginator layout in Laravel 5.1? I am looking to include first and last links along with the default previous and next links. I would like to change the previous and next links to show icons instead of text, while still ma ...

phpcsspaginationlaravel-5.1

Include the option to display an arrow pointing downwards in the flag dropdown menu

How can I include a downward arrow in my dropdown menu? Here is the link to my current code: https://jsfiddle.net/bvotcode/qe6L3bxr/1/ This is my CSS: .flagdropdown { position: relative; cursor: pointer; border: 0.5px solid gray; width: 110px; position: ...

htmlcssdropdown

Bot on Discord using Discord.Js that generates unique invites for users

I'm trying to find a way to generate an invite link for users to keep track of invites. The code I have currently is creating the invite for the Bot instead. const channel = client.channels.cache.find(channel => channel.id === config.server.channel ...

javascriptdiscorddiscord.jsbots

Analyzing an array of objects

Is there a way to filter an array of objects to only include elements that have 'text' containing 'ild'? For example, consider the following array: public data: any[] = [ { treeViewKey:0, id: 1, text: 'Root Node 1&a ...

javascripttypescript

Attempting to position a <p> element to float within a forum layout

I am in the process of creating a platform for users to engage with topics by viewing, posting, and responding. The issue I am currently facing is related to positioning elements within the forum setup. Specifically, I am encountering difficulties with ali ...

javascripthtmlcss

The intersection observer fails to detect any new elements or entries that are appended to the page after it has

When I press the "add section" button to create a new section, the intersection observer does not seem to observe it. Even when I try to run the observer again after pressing the button, it still doesn't work. I suspect that I need to reassign the `se ...

javascripthtmlcssarraysintersection-observer

html retrieve newly updated page from the provided link

I am facing an issue where I set a cookie on one page and try to unset it on the next page that I reach via a link. However, the cookie only gets unset when I refresh the second page by pressing F5. To test this scenario, I have added a link and some cook ...

phpjavascriptcookiespage-refresh

In JavaScript, the handleSubmit function is effective, whereas in TypeScript React, it presents some

Currently, I am attempting to manage form submission in React using external functions and encountering an error message specific to Typescript React. Parameter 'event' implicitly has an 'any' type.ts(7006) Below is the code snippet ca ...

javascriptreactjstypescript

manage data from multiple users using node.js and socket.io

After extensive searching on this site and across the web, I have yet to find a satisfactory answer to my query. I am in the process of developing a small multiplayer web game using node.js + socket.io for the back-end. To handle new users, I have written ...

javascriptnode.jssocket.io

Scrolling through a list in Angular using cdk-virtual-scroll-viewport while selecting items via keyboard input

Looking to implement a customized Autocomplete feature. As the user begins typing, a small window should appear with selectable options. I want users to have the ability to navigate and select an option using their keyboard. For instance: - User types "H ...

javascriptangulartypescriptangular-cdk

Upon initial startup, the "Get Authenticated" process gets stuck in an endless loop

Upon initially loading my AngularJS application, I am faced with a blank screen and an endless loop attempting to verify the user's authentication status. For this specific project, I have opted for sails version 0.11.0 as well as the latest version ...

javascriptangularjsnode.jsauthenticationsatellizer

Error in code - message gets sent immediately instead of waiting for timeout to occur

There seems to be an issue with the code where the message is sent instantly instead of waiting for the specified timeout duration. Based on the code, it should wait for the time mentioned in the message. I'm puzzled as to why it's not functioni ...

javascriptnode.jsdiscorddiscord.js

Vertically align the text

Is there a way to center this text vertically within the divs? I've attempted adjusting the position using relative/absolute, and modifying the top and left properties of the paragraph, but none of these methods have been successful. div.roxo{ ...

htmlcssalignment

Tips on spotlighting Table of Contents with IntersectionObserver in NEXT JS

Currently working on my NextJS app and hoping to find a way to highlight the table of contents entry when its content is visible. Stumbled upon this helpful solution: https://css-tricks.com/table-of-contents-with-intersectionobserver/ but unsure how to a ...

javascriptreactjsnext.jsintersection-observer

My task is to automate the PDF document in Internet Explorer

Performing PDF tasks is something new to me. Whenever I click on the view link, the PDF document opens up and I have to save it to verify. Unfortunately, there is no download option available for me. https://i.sstatic.net/Dz5lB.png When I click on view P ...

javascriptselenium-webdriver

Using HTML5 video and jQuery to seamlessly switch between two videos with fallback options, unfortunately encountering issues in Firefox

For html and video files, visit dausign.com/clicktohearsound Hello there! I am currently creating a straightforward video presentation that involves a button to swap between videos. However, for some reason, the video is not appearing in firefox. Plus, I ...

jqueryhtmlvideoswap