Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <table class="selectively-stripe">
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th class="stripe-this-one">Header</th>
      <th>Header</th>
    </tr>
    
    
    <tr>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>      
    </tr>
    
    <tr>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>      
    </tr>
    
    <tr>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>      
    </tr>
    
    <tr>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>      
    </tr>  
    
    <tr>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>      
    </tr>
    
    <tr>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>      
    </tr>  
    
    <tr>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>      
    </tr>
    
    <tr>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>      
    </tr>  
    
  </table>
  
</body>
</html>
 
table {
 border-collapse: collapse;
  border-spacing: 0;
}
td, th { border: 1px solid blue; }
tr:nth-of-type(even) td:nth-of-type(3) { background: green; }
 
var col_to_stripe = $('th.stripe-this-one').index();
$('table.selectively-stripe').find('tr:odd')
  .each(function() {
    $(this).children('td')
      .eq(col_to_stripe)
      .css('background', 'pink');
  });
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers