如何使用jQuery

Question

我试图在表格中选择某个元素，然后开始在tbody中计算tr，我的条件就像下面的代码一样。

如何更改颜色＆＃34;仅选择＆＃34;用红色，只有tr> 3，除此之外使其成为蓝色

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

简单的CSS就足够了，使用:nth-child伪类选择器。虽然您可以使用相同的选择器或通过检查元素的索引来使用jQuery执行此操作。

table tr a {
  color: blue;
}

table tr:nth-child(n+4) a {
  color: red;
}

＆＃13;

＆＃13;

table {
  width: 100%;
}

table th,
td {
  text-align: center;
}

.active {
  font-size: 20px;
}

table tr a {
  color: blue;
}

table tr:nth-child(n+4) a {
  color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用jQuery：

$('table tr:not(:nth-child(n+4)) a').css('color', 'blue')
$('table tr:nth-child(n+4) a').css('color', 'red')

＆＃13;

＆＃13;

$('table tr:not(:nth-child(n+4)) a').css('color', 'blue')
$('table tr:nth-child(n+4) a').css('color', 'red')

＆＃13;

table {
  width: 100%;
}

table th,
td {
  text-align: center;
}

.active {
  font-size: 20px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这将使前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>

Answer 3

使用此

$(document).ready(function(){
   var trcount=$('table tbody').children('tr').length();
   if(trcount>3){
      var count=1;
      $.each('table tr',function(i,v){
           if(count<=3){
               $(this).find('a').css('color','red').addClass('active');
           }else{
               $(this).find('a').css('color','blue');
           }
      }); 
   } 
})