Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Question

Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Need help with my HTML/CSS code. I have a table where I need to change the background color of any row that has a cell value of "Not Approved" while using a foreach loop in Google Apps Script to send an email with two tables. What is the exact code for this?
table, th, td { border: 1px solid black; }

Spreader	Hoisting Speed	Stiffness Class	Hoist Drive Class	Lifetime Load Cycles	Q Class Classification	Gantry Acceleration	Trolley Acceleration	Lifting Capacity SWL Single Mode	Lifting Capacity SWL Twin Mode	Eccentricity Longitudinal Percentage	Container Weight Single Mode

html jquery css

Answer 1

Answer №1

$('table tr').filter(function() {
return $(this).find("td:contains('Not Approved')").length > 0;
}).css('background','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Approved</td>
<td>Approved</td>
<td>Approved</td>
</tr>
<tr>
<td>Approved</td>
<td>Not Approved</td>
<td>Approved</td>
</tr>
<tr>
<td>Approved</td>
<td>Approved</td>
<td>Approved</td>
</tr>
</table>

You can utilize the :contains selector to verify the text within each td, then narrow down the rows based on the presence of 'Not Approved' in any td:

$('.yourtable tr').filter(function() {
return $(this).find(td:contains('Not Approved')).length > 0)})
.css('background':'red');

Answer 2

$('table tr').filter(function() {
return $(this).find("td:contains('Not Approved')").length > 0;
}).css('background','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Approved</td>
<td>Approved</td>
<td>Approved</td>
</tr>
<tr>
<td>Approved</td>
<td>Not Approved</td>
<td>Approved</td>
</tr>
<tr>
<td>Approved</td>
<td>Approved</td>
<td>Approved</td>
</tr>
</table>

You can utilize the :contains selector to verify the text within each td, then narrow down the rows based on the presence of 'Not Approved' in any td:

$('.yourtable tr').filter(function() {
return $(this).find(td:contains('Not Approved')).length > 0)})
.css('background':'red');

Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Answer №1

Similar questions

Unable to send a PHP array to jQuery

Unable to make a successful POST request using the JQuery $.ajax() function

The requested resource has No Access-Control-Allow-Origin for the XMLHttpRequest

Retrieve element attributes and context inside a function invoked by an Angular directive

Internet Explorer displaying incorrect shadow effects (paper curl) with CSS

Utilizing jQuery AJAX with a plethora of dynamically created div elements

Content within the Iframe is in the process of loading, followed by

Unused sizing attributes in IMG tags

Sudden slowdown due to Jquery error

Adjusting the background element of a fullpage.js layout during resizing and customization

An unusual visual anomaly (a small line appears) when hovering over a button in the web browser

Issues with jQuery AJAX, occasionally experiencing repeated requests

unable to decipher a JSON file obtained from Instagram

Set the modal-dialog to have a fixed width, but ensure that it becomes responsive and adjusts size appropriately when the screen size becomes smaller

Guide to manipulating DOM elements with Angular.js: inserting or deleting elements using createElement

Filtering date ranges in two columns of Datatables

What is the best way to add a listener for a modification of innerHTML within a <span>?

How can a key press be simulated without specifically targeting an element?

Does CSS give preference to max width specifications?

In Javascript, create a variable that dynamically updates for every child element