Question

我正在试图弄清楚如何根据单元格的值设置行颜色。我为此目的使用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>

Answer 1

tr不是#my-orders-table的直接子女。您应该使用#my-orders-table > tbody > tr选择器代替#my-orders-table > tr > td.progress和filter()方法，如下所示。

＆＃13;

$(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');
});

＆＃13;

<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>

＆＃13;

使用JQuery基于单元格值更改行的颜色

1 个答案: