1

Chris Coyier の表の行と列のハイライト コードを使用し、ゼブラ ストライプを追加しました。行を強調表示することはできますが、ゼブラ ストライプが有効になっていると列が強調表示されなくなります。

jQuery の最初の 2 行のコメントを外してゼブラ ストライプを表示すると、上で概説した問題が表示されます。

これらが競合する理由は完全にはわかりません。

どんな助けでも感謝します。

すべてのコードがここにあることについて申し訳ありませんが、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>​
4

1 に答える 1

2

セレクターに :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/

于 2012-10-27T16:25:23.047 に答える