CODEWITHSUNDEEP
javascriptjqueryhtml
code4j
code4j

Reputation: 4636

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 comes 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" "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>

Upvotes: 3

Views: 3146

Answers (4)

wirey00
wirey00

Reputation: 33661

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.net/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.net/wirey00/GHGQB/

Upvotes: 1

Ram
Ram

Reputation: 144689

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')

Upvotes: 6

Philippe Boissonneault
Philippe Boissonneault

Reputation: 3949

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*/
  }

Upvotes: 1

user1289347
user1289347

Reputation: 2407

just remove the unwanted class 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');
      }
  );​

Upvotes: 1

Related Questions