javascript - Cannot select tr not containing th elements in jquery

The example is from a book. Table heading,Odd,even rows have different colors. It selects tr which do not contain th element so that prevent the style overlapping between table heading and even row. But after the rending of browser,it will es out <tr class="table-heading even">. So the style of even rows overwrite that of table heading row.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/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>

Share Improve this question asked Aug 17, 2012 at 18:28 code4j 4,6966 gold badges38 silver badges53 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 6

You can use the :has selector, try this:

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

Or:

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

In your css, put the table-heading rule at the bottom to override .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*/
  }

just remove the unwanted class http://jsfiddle/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');
      }
  );

use not() to filter tr th out

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

or even shorter

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Cannot select tr not containing th elements in jquery - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)