3

例は本からです。表の見出し、奇数、偶数行は色が異なります。テーブルの見出しと行の間でスタイルが重複しないように、要素を含まない tr を選択します。しかし、ブラウザのレンダリング後、出てき<tr class="table-heading even">ます。そのため、偶数行のスタイルは表見出し行のスタイルを上書きします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Styling Alternate Rows</title>
    <style type="text/css">
      .table-heading{
          text-align:left;
          background-color:#6C6; /*green for table heading*/
      }     
      .odd{
          background-color:#ffc; /*pale yellow for odd row*/
      }
      .even{
          background-color:#cef; /*pale blue for even rows*/
      }
      .highlight{
          font-weight:bolid;
          color:#f00;
      }
    </style>
    <script src="../jquery-1.8.0.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function (){
              //style table heading row
              $('th').parent().addClass('table-heading');             
              //style odd row
              $('tr:not([th]):odd').addClass('odd');
              //style even row
              $('tr:not([th]):even').addClass('even');
              //style next table cells of the cell containing the word "Henry"
              $('td:contains("Henry")').next().addClass('highlight');
          }
      );
    </script>
</head>

<body>
    <table>
        <tr>
            <th>Title</th>
            <th>Category</th>
        </tr>
        <tr>
            <td>As your like it</td>
            <td>Comedy</td>
        </tr>
        <tr>
            <td>All well</td>
            <td>Comedy</td>
        </tr>
        <tr>
            <td>Henry IV Part 1</td>
            <td>Tragely</td>
        </tr>
        <tr>
            <td>Henry V</td>
            <td>Tragely</td>
        </tr>
    </table>
</body>
</html>
4

4 に答える 4

6

:hasセレクターを使用できます。これを試してください：

$('tr:not(":has(th)"):odd').addClass('odd');
$('tr:not(":has(th)"):even').addClass('even');

または：

var $tr = $('tr:not(":has(th)")');
$tr.filter(':odd').addClass('odd')
$tr.filter(':even').addClass('even')
于 2012-08-17T18:35:43.910 に答える
1

not() を使用して tr th を除外します

$(document).ready(function() {
    var $th = $('th');
    //style table heading row
    $th.parent().addClass('table-heading');
    //style odd row
    $('tr:odd').not($th.parent()).addClass('odd');
    //style even row
    $('tr:even').not($th.parent()).addClass('even');
    //style next table cells of the cell containing the word "Henry"
    $('td:contains("Henry")').next().addClass('highlight');
});​

http://jsfiddle.net/wirey00/ELJpN/

またはさらに短い

$(document).ready(function() {
    var $thp = $('th').parent();
    $thp.addClass('table-heading');
    $('tr').not($thp).addClass(function(){
        return $(this).index() % 2 == 0 ? 'even':'odd';
    });    
});​

http://jsfiddle.net/wirey00/GHGQB/

于 2012-08-17T18:38:39.017 に答える
1

不要なクラスhttp://jsfiddle.net/8GHKd/を削除するだけです

$(document).ready(function (){
          //style odd row
          $('tr:not([th]):odd').addClass('odd');
          //style even row
          $('tr:not([th]):even').addClass('even');
          //style next table cells of the cell containing the word "Henry"
          $('td:contains("Henry")').next().addClass('highlight');
          //style table heading row
          $('th').parent().addClass('table-heading').removeClass('even');
      }
  );​
于 2012-08-17T18:35:45.633 に答える
1

css で、.even をオーバーライドするためにテーブル見出しルールを一番下に配置します。

  .odd{
      background-color:#ffc; /*pale yellow for odd row*/
  }
  .even{
      background-color:#cef; /*pale blue for even rows*/
  }
  .highlight{
      font-weight:bolid;
      color:#f00;
  }
  .table-heading{
      text-align:left;
      background-color:#6C6; /*green for table heading*/
  }
于 2012-08-17T18:36:49.977 に答える