jquery - 如何使用jQuery选择表格中的某些内容

Question

我正在尝试选择表中的某些元素，然后开始计算 tbody 中的 tr，并设置如下代码所示的条件。

如何将“仅选择”中的颜色更改为红色，仅当 tr > 3 时，除此之外使其变为蓝色

如有任何建议，我将不胜感激

$(document).ready(function(){
  var tr = $('.table-wrapper > table > tbody > tr');
  if( $(tr).length > 3){
    $(this).find('a').css('color','red').addClass('active');
  }
  else{
   $(this).find('a').css('color','blue');
  }
})

table{
  width: 100%;
 }
 
table th,td{
  text-align: center;
 }
.active{
  font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>  
    </thead>
    <tbody>
      <tr>
        <td><a href="">Blue</a></td>
        <td>content 2</td>
        <td>content 3</td>
      </tr>
      <tr>
        <td>content 1</td>
        <td><a href="">Blue</a></td>
        <td>content 3</td>
      </tr>
      <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
      </tr>
      <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td><a href="">select only</a></td>
      </tr>
      <tr>
        <td>content 1</td>
        <td><a href="">select only</a></td>
        <td>content 3</td>
      </tr>
      <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

这将使前 3 行变为蓝色，其他行变为红色

$(document).ready(function(){
  var tr = $('.table-wrapper > table > tbody > tr');
  tr.each(function(i){
    if( i > 2){
      $(this).find('a').css('color','red').addClass('active');
    }
    else{
      $(this).find('a').css('color','blue');
    }
  });
})

table{
  width: 100%;
 }
 
table th,td{
  text-align: center;
 }
.active{
  font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
      </tr>  
    </thead>
    <tbody>
      <tr>
        <td><a href="">Blue</a></td>
        <td>content 2</td>
        <td><a href="">select only</a></td>
      </tr>
      <tr>
        <td>content 1</td>
        <td><a href="">Blue</a></td>
        <td>content 3</td>
      </tr>
      <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
      </tr>
      <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td><a href="">select only</a></td>
      </tr>
      <tr>
        <td>content 1</td>
        <td><a href="">select only</a></td>
        <td>content 3</td>
      </tr>
      <tr>
        <td>content 1</td>
        <td>content 2</td>
        <td>content 3</td>
      </tr>
    </tbody>
  </table>
</div>