Home/ Questions/Q 8393433
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T19:47:06+00:00

The example is from a book. Table heading,Odd,even rows have different colors. It selects

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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