Я взял код выделения строки и столбца таблицы Криса Койера и добавил полосу зебры. Я могу выделить строку, но столбец перестает выделяться, когда включены полосы зебры.
Если вы раскомментируете первые две строки 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>