[英]Change a color of the row based on cells value using JQuery
我試圖弄清楚如何根據單元格的值設置行顏色。 我為此使用JQuery
。
在我的情況下,我想為每一行設置紅色,以便progress
單元格文本等於“ Pending”。
我已經寫了這個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>
tr
不是#my-orders-table
直接子#my-orders-table
。 您應該使用#my-orders-table > tbody > tr
選擇器,而不是#my-orders-table > tr > td.progress
和filter()
方法,如下所示。
$(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 pm</td> <td class="modified">05/29/2016 4:33 pm</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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.