CODEWITHSUNDEEP
jqueryhtml-table
rnDesto
rnDesto

Reputation: 259

How to select certain content in table with jQuery

I'm trying to select certain element in table and I start to count tr within tbody and I make condition like my code below.

How I can change color in "select only" with red, only if tr > 3, other than that make it blue

I would be grateful if there any suggestion

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

Upvotes: 1

Views: 51

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115282

Simple CSS is enough for that, use :nth-child pseudo class selector. Although you can do this with jQuery using the same selector or by checking the index of the element.

table tr a {
  color: blue;
}

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


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

With jQuery : 

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


$('table tr:not(:nth-child(n+4)) a').css('color', 'blue')
$('table tr:nth-child(n+4) a').css('color', 'red')
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>

Upvotes: 2

Pooya Mobasher Behrooz
Pooya Mobasher Behrooz

Reputation: 1292

This will make first 3 rows blue and others red 

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

Upvotes: 2

RAUSHAN KUMAR
RAUSHAN KUMAR

Reputation: 6004

use this

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

Upvotes: 1

Related Questions