Problem with input:text with filter

Problem with input:text with filter

Hi,

I am working on learning more about jQuery selectors. I have a simple page and I wrote two simple scripts to change the colors of the odd/even text input objects.

Here's the HTML and JS code:

Selectors.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>jQuery Selectors</title>
  6.        
  7.         <script type="text/javascript" src="/resources/jquery/jquery.1.11.1.min.js"></script>
  8.         <script type="text/javascript" src="selectors.js"></script>
  9.     </head>
  10.     <body>
  11.         <table>
  12.             <tr>
  13.                 <td>Name</td>
  14.                 <td><input type="text" id="txtName" /></td>
  15.                 <td><input type="button" id="cmdName" value="SetName" onclick="setValueName();"/></td>
  16.             </tr>
  17.             <tr>
  18.                 <td>Date & Time</td>
  19.                 <td><input type="text" id="txtDateTime" /></td>
  20.                 <td><input type="button" id="cmdDateTime" value="SetDateTime" onclick="setValueDateTime();"/></td>
  21.             </tr>
  22.             <tr>
  23.                 <td>Name</td>
  24.                 <td><input type="text" id="txtName2" /></td>
  25.                 <td><input type="button" id="cmdSetOdd" value="Set Odd Colors" onclick="setOddColor();"/></td>
  26.             </tr>
  27.             <tr>
  28.                 <td>Date & Time</td>
  29.                 <td><input type="text" id="txtDateTime2" /></td>
  30.                 <td><input type="button" id="cmdSetEven" value="Set Even Colors" onclick="setEvenColor();"/></td>
  31.             </tr>
  32.            
  33.         </table>
  34.     </body>
  35. </html>

Selectors.js
  1. function setValueName(){
  2.     $('#txtName').val('Menachem Bazian');
  3. }
  4. function setValueDateTime(){
  5.     var dDate = new Date($.now());
  6.     $('#txtDateTime').val(dDate);
  7. }
  8. function setOddColor(){
  9.     $('input:text:odd').css("background-color", "#C0C0C0");
  10. }
  11. function setEvenColor(){
  12.     $('input:text:even').css("background-color", "blue");
  13. }

Here's the problem. When I click on the Even button, it is changing the color of the first and third text inputs. When I click on the Odd button, it does the second and fourth.

What am I doing wrong?

Thanks