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

What is the best approach to transforming my jQuery function into CSS to ensure responsiveness?

javascript code for subtracting values in arrays

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

What is the correct way to markup the semantic form label assistance text?

How can we avoid repeated evaluations by using memoization in a function?

Having difficulty showing the successful JSON output in either the view or an alert

Upon selecting the checkbox, the user will be redirected to an input textbox

Having trouble getting datatables.net to function properly with JavaScript

What order should jquery files be included in?

The compatibility issue between jQuery Tabs and Sliding effect

Jquery.css causing annoying flickering issue on Internet Explorer and Webkit browsers (such as Chrome and Safari), while Firefox remains unaffected

Designing a WordPress widget: Implementing code to selectively load scripts when the widget is displayed on a page

Is there a way to align the navigation menu options to the right side of the navbar?

Utilizing deferred to ensure that one function completes before triggering a refresh

Opera browser having trouble with sidebar rendering

Accessing array values depending on DOM response

HTMLElement addition assignment failing due to whitespace issues

Tips for achieving consistent outcomes on both IE and Chrome when utilizing the `min` attribute in HTML input tags

Utilizing jQuery, AJAX, PHP, and MySQL for a dynamic auto-suggest feature in form inputs

What are the best techniques for distinguishing the selected selector in jQuery?