Question

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

Answer 1

您可以使用: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')

Answer 2

只需删除不需要的课程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');
      }
  );

Answer 3

在你的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*/
  }

Answer 4

使用not（）来过滤掉

$(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/

无法在jquery中选择不包含th元素的tr

4 个答案: