Question

I have taken the Chris Coyier table row and col highlight code and added zebra striping. I can get the row to highlight but the col stops highlighting when zebra stripes are enabled.

If you uncomment the 1st 2 lines of jQuery to show zebra striping you will see the problem I’ve outlined above.

Not entirely sure why these are conflicting.

Any help appreciated.

Sorry about ALL the code being here but it seems I can’t use jsFiddle to show you, ya know, that really helpful service to show you code working so you can edit and fiddle with it.

CSS

table           {width:100%; border-collapse:collapse;}

    th          {background:#95bce2; color:white; font-weight:bold;}
    td, th      {padding:6px; border:1px solid #95bce2; text-align:left;}

.even           {background-color:#ecf6fc;}
.odd            {background-color:white;}

.hover          {background-color:#ccc!important;}
.focus          {background-color:#6ab9d0!important; color:white;}​

JQuery

/* If I uncomment these lines the colgroup highlight doesn't work */ 
//$('tr:odd').addClass('odd')
//$('tr:even').addClass('even')


$('.table1').delegate('td','mouseover mouseleave', function(e)
{
    if (e.type == 'mouseover')
    {            
        $(this).addClass('focus');
        $(this).parent().addClass('hover');
        $("colgroup").eq($(this).index()).addClass('hover');
    }
    else
    {
        $(this).removeClass('focus');
        $(this).parent().removeClass('hover');
        $('colgroup').eq($(this).index()).removeClass('hover');
    }
});

HTML

<table class="table1">
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
        <colgroup></colgroup>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
            <th>Favorite Color</th>
            <th>Wars or Trek?</th>
            <th>Porn Name</th>
            <th>Date of Birth</th>
            <th>Dream Vacation City</th>
            <th>GPA</th>
            <th>Arbitrary Data</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>Matman</td>
            <td>Chief Sandwich Eater</td>
            <td>Lettuce Green</td>
            <td>Trek</td>
            <td>Digby Green</td>
            <td>January 13, 1979</td>
            <td>Gotham City</td>
            <td>3.1</td>
            <td>RBX-12</td>
        </tr>
        <tr>
          <td>The</td>
          <td>Tick</td>
          <td>Crimefighter Sorta</td>
          <td>Blue</td>
          <td>Wars</td>
          <td>John Smith</td>
          <td>July 19, 1968</td>
          <td>Athens</td>
          <td>N/A</td>
          <td>Edlund, Ben (July 1996).</td>
        </tr>
        <tr>
          <td>Jokey</td>
          <td>Smurf</td>
          <td>Giving Exploding Presents</td>
          <td>Smurflow</td>
          <td>Smurf</td>
          <td>Smurflane Smurfmutt</td>
          <td>Smurfuary Smurfteenth, 1945</td>
          <td>New Smurf City</td>
          <td>4.Smurf</td>
          <td>One</td>
        </tr>
        <tr>
          <td>Cindy</td>
          <td>Beyler</td>
          <td>Sales Representative</td>
          <td>Red</td>
          <td>Wars</td>
          <td>Lori Quivey</td>
          <td>July 5, 1956</td>
          <td>Paris</td>
          <td>3.4</td>
          <td>3451</td>
        </tr>
        <tr>
          <td>Captain</td>
          <td>Cool</td>
          <td>Tree Crusher</td>
          <td>Blue</td>
          <td>Wars</td>
          <td>Steve 42nd</td>
          <td>December 13, 1982</td>
          <td>Las Vegas</td>
          <td>1.9</td>
          <td>Under the couch</td>
        </tr>
    </tbody>
</table>​

Answer 1

why don’t you use the :hover pseudo-classes for the selector? you don’t need to (and you shouldn’t) do it using javascript, if you use pure css you cover also browsers even with js disabled

for the even/odd classes, just put the classes on the php/html file or user css rules (if you don’t care about old browsers) http://www.w3.org/Style/Examples/007/evenodd

table           {width:100%; border-collapse:collapse;}

th          {background:#95bce2; color:white; font-weight:bold;}
td, th      {padding:6px; border:1px solid #95bce2; text-align:left;}

tr:nth-child(even)           {background-color:#ecf6fc;}
tr:nth-child(odd)           {background-color:white;}

tr:hover, td.hover          {background-color:#ccc!important;}
td:hover          {background-color:#6ab9d0!important; color:white;}

The colgroup tag is deprecated so you shouldn’t use it, you do need js fot that

$('.table1 td').hover(
  function(){
    $('.table1 td:nth-child('+($(this).index()+1)+')').addClass('hover');
  },
  function(){
    $('.table1 td:nth-child('+($(this).index()+1)+')').removeClass('hover');
  });

check this fiddle http://jsfiddle.net/YDLDm/6/