0

I'm trying to figure out how to set row color based on cell's value. I use JQuery for this purpose.

In my case, I want to set red color for each row which progress cell's text equals to 'Pending'.

I've written this JQuery:

$(document).ready(function () { var table = $('#my-orders-table'); var rows_pending = $('#my-orders-table > tr > td.progress'); # Can't figure out how to get just those rows which has 'Pending' in `td class="progress"` text }); 

.

<table width="70%" id="my-orders-table" class="table table-striped table-bordered table-hover"> <thead> <tr> <th class="orderable translator"><a href="?sort=translator">Translator</a></th> <th class="orderable short_description"><a href="?sort=short_description">short description</a></th> <th class="language_from orderable"><a href="?sort=language_from">language from</a></th> <th class="language_to orderable"><a href="?sort=language_to">language to</a></th> <th class="level orderable"><a href="?sort=level">level</a></th> <th class="created orderable"><a href="?sort=created">created</a></th> <th class="modified orderable"><a href="?sort=modified">modified</a></th> <th class="orderable price"><a href="?sort=price">Price</a></th> <th class="orderable progress"><a href="?sort=progress">Progress</a></th> <th class="edit_entries orderable"><a href="?sort=edit_entries">Edit Entries</a></th> </tr> </thead> <tbody> <tr class="even"> <td class="translator">Not Yet</td> <td class="short_description">Short desc</td> <td class="language_from">Russian</td> <td class="language_to">Magyar</td> <td class="level">Standard level</td> <td class="created">05/29/2016 4:32 p.m.</td> <td class="modified">05/29/2016 4:33 p.m.</td> <td class="price">Not Yet</td> <td class="progress">Pending</td> <td class="edit_entries"><a href="/jobs/update/16">Edit Order</a></td> </tr> </tbody> <tfoot></tfoot> </table> 

1 Answer 1

1

tr is not direct child of #my-orders-table. You should use #my-orders-table > tbody > tr selector instead of #my-orders-table > tr > td.progress and filter() method like following.

$(document).ready(function() { var table = $('#my-orders-table'); $('#my-orders-table > tbody > tr').filter(function() { return $(this).find('td.progress').text().trim() == 'Pending' }).css('background-color', 'red'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table width="70%" id="my-orders-table" class="table table-striped table-bordered table-hover"> <thead> <tr> <th class="orderable translator"><a href="?sort=translator">Translator</a></th> <th class="orderable short_description"><a href="?sort=short_description">short description</a></th> <th class="language_from orderable"><a href="?sort=language_from">language from</a></th> <th class="language_to orderable"><a href="?sort=language_to">language to</a></th> <th class="level orderable"><a href="?sort=level">level</a></th> <th class="created orderable"><a href="?sort=created">created</a></th> <th class="modified orderable"><a href="?sort=modified">modified</a></th> <th class="orderable price"><a href="?sort=price">Price</a></th> <th class="orderable progress"><a href="?sort=progress">Progress</a></th> <th class="edit_entries orderable"><a href="?sort=edit_entries">Edit Entries</a></th> </tr> </thead> <tbody> <tr class="even"> <td class="translator">Not Yet</td> <td class="short_description">Short desc</td> <td class="language_from">Russian</td> <td class="language_to">Magyar</td> <td class="level">Standard level</td> <td class="created">05/29/2016 4:32 p.m.</td> <td class="modified">05/29/2016 4:33 p.m.</td> <td class="price">Not Yet</td> <td class="progress">Pending</td> <td class="edit_entries"><a href="/jobs/update/16">Edit Order</a></td> </tr> </tbody> <tfoot></tfoot> </table>

Sign up to request clarification or add additional context in comments.

1 Comment

thanks, but I need to change color of all cells in the row. In fact, background-color but it does not matter now.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.