Post
Ask Question

Changes Background Color of Even Rows to Gray and Odd Rows to Yellow on the Tables using JQuery

Changes the background color of even rows to gray and odd rows to yellow on the tables using JQUERY.

  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5.     <script src="jquery-1.11.2.js"></script>  
  6.     <script type="text/javascript">  
  7.         $(document).ready(function() {  
  8.             $('tr:even').css('background-Color', 'gray');  
  9.             $('tr:odd').css('background-Color', 'yellow');  
  10.         });  
  11.     </script>  
  12. </head>  
  13.   
  14. <body>  
  15.     <table id="table1" border="1">  
  16.         <tr>  
  17.             <td>C#</td>  
  18.             <td>ASP.NET</td>  
  19.             <td>SQL Server</td>  
  20.         </tr>  
  21.         <tr>  
  22.             <td>.NET</td>  
  23.             <td>jQuery</td>  
  24.             <td>JavaS</td>  
  25.         </tr>  
  26.         <tr>  
  27.             <td>AJAX</td>  
  28.             <td>CSS</td>  
  29.             <td>HTML</td>  
  30.         </tr>  
  31.         <tr>  
  32.             <td>VB</td>  
  33.             <td>Dot NET</td>  
  34.             <td>Visual</td>  
  35.         </tr>  
  36.         <tr>  
  37.             <td>Oracle</td>  
  38.             <td>Java</td>  
  39.             <td>J2EE</td>  
  40.         </tr>  
  41.     </table>  
  42.     <br />  
  43.     <table id="table2" border="1">  
  44.         <tr>  
  45.             <td>M1</td>  
  46.             <td>M2</td>  
  47.             <td>M3</td>  
  48.         </tr>  
  49.         <tr>  
  50.             <td>N1</td>  
  51.             <td>N2</td>  
  52.             <td>N3</td>  
  53.         </tr>  
  54.         <tr>  
  55.             <td>O1</td>  
  56.             <td>O2</td>  
  57.             <td>O3</td>  
  58.         </tr>  
  59.         <tr>  
  60.             <td>P1</td>  
  61.             <td>P2</td>  
  62.             <td>P3</td>  
  63.         </tr>  
  64.         <tr>  
  65.             <td>Q1</td>  
  66.             <td>Q2</td>  
  67.             <td>Q3</td>  
  68.         </tr>  
  69.     </table>  
  70. </body>  
  71.   
  72. </html>  
To change the background color of even rows to gray and odd rows to yellow just for one of the table, use #id selector along with element selector.
  1. <script type="text/javascript">  
  2.     $(document).ready(function() {  
  3.         $('#table1 tr:even').css('background-Color', 'gray');  
  4.         $('#table1 tr:odd').css('background-Color', 'yellow');  
  5.     });  
  6. </script>