2016-05-29 2 views
0

Я пытаюсь выяснить, как установить цвет строки на основе значения ячейки. Для этой цели я использую JQuery.Изменить цвет строки на основе значений ячеек с помощью JQuery

В моем случае, я хочу установить красный цвет для каждой строки, который progress Текст ячейки равен «Ожидание».

Я написал это 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

tr не является прямым потомком #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 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>

+0

спасибо, но мне нужно изменить цвет всех ячеек в строке. Фактически, фоновый цвет, но теперь это не имеет значения. –

+0

См. Обновленный ответ. @Milano – Azim

Смежные вопросы