Выделение строк и столбцов таблицы полосами зебры

Я взял код выделения строки и столбца таблицы Криса Койера и добавил полосу зебры. Я могу выделить строку, но столбец перестает выделяться, когда включены полосы зебры.

Если вы раскомментируете первые две строки jQuery, чтобы показать полосатость зебры, вы увидите проблему, описанную выше.

Не совсем уверен, почему они конфликтуют.

Любая помощь приветствуется.

Извините за то, что ВЕСЬ код находится здесь, но, похоже, я не могу использовать jsFiddle, чтобы показать вам, вы знаете, этот действительно полезный сервис, чтобы показать вам работающий код, чтобы вы могли редактировать и возиться с ним.

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

person sygad1    schedule 27.10.2012    source источник


Ответы (1)


почему бы вам не использовать псевдоклассы :hover для селектора? вам не нужно (и вы не должны) делать это с помощью javascript, если вы используете чистый css, вы также охватываете браузеры, даже с отключенным js

для четных/нечетных классов просто поместите классы в файл php/html или пользовательские правила css (если вам не нужны старые браузеры) 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;}

Тег colgroup устарел, поэтому вам не следует его использовать, для этого вам нужен js

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

проверьте эту скрипту http://jsfiddle.net/YDLDm/6/

person arieljuod    schedule 27.10.2012