3

这个例子来自一本书。表格标题，奇数，偶数行有不同的颜色。它选择不包含 th 元素的 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

只需删除不需要的类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 回答
1

使用 not() 过滤掉 tr

$(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 回答