javascript - Zebra striping to just one table column - Stack Overflow

admin管理员组

文章数量:1325144

I have a table that uses tablesorter and zebra striping for the table rows. I would like to add zebra striping to just one of the table COLUMNS to give it a little emphasis. like this:

I have a table that uses tablesorter and zebra striping for the table rows. I would like to add zebra striping to just one of the table COLUMNS to give it a little emphasis. like this:

• javascript
• jquery
• css
• tablesorter
• zebra-striping

Share Improve this question Follow edited Oct 3, 2012 at 17:14 Diodeus - James MacFarlane 114k3333 gold badges163163 silver badges180180 bronze badges asked Oct 3, 2012 at 17:11 TmacTmac 31111 silver badge1616 bronze badges 1

• 3 something is not right... i see text and pictures, but no code – yodog Commented Oct 3, 2012 at 17:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

If you know the column index of the one you'd like to stripe, you can do it in CSS only, using :nth-of-type selectors like so:

tr:nth-of-type(even) td:nth-of-type(3) { background: rgba(0,0,0,0.1); }

(Where 3 is being used a placeholder for your target column index)

Another option would be to put a class on the header (or first td) of the column you want to stripe, and then use JS to stripe the other tds in the same column:

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

The class is not necessary as obviously you can just put the column index you want as with the pure CSS approach, but it's better for clarity of code.

demo here: http://jsbin./axutal/2/edit

check this link

This can be done using jQuery without giving class names or id's.

 $('tr:odd  td:nth-child(4)').css('background','#999999'); /* For odd td's */
 $('tr:even td:nth-child(4)').css('background','#DDDDDD'); /* For even td's */  

For more information on this jQuery selector go through this link

You'll need an additional class name and corresponding CSS declaration for the TDs in that column.

本文标签： javascriptZebra striping to just one table columnStack Overflow