jQuery Forum

Function is called when i click on input fields called Hour or Minute
 

1. <!-- table 24 hours -->
2. <table width="33%" height="73" border="0" cellspacing="1" id="hour">
3. <tr>
4.    <td>01</th>
5.    <td>02</th>
6.    <td>03</th>
7.    <td>04</th>
8.    <td>05</th>
9.    <td>06</th>
10.    <td>07</th>
11.    <td>08</th>
12.    <td>09</th>
13.    <td>10</th>
14.    <td>11</th>
15.    <td>12</th>
16.   </tr>
17.   <tr>
18.     <td height="34">13</td>
19.     <td>14</td>
20.     <td>15</td>
21.     <td>16</td>
22.     <td>17</td>
23.     <td>18</td>
24.     <td>19</td>
25.     <td>20</td>
26.     <td>21</td>
27.     <td>22</td>
28.     <td>23</td>
29.     <td>24</td>
30.   </tr>
31. </table>
32. 
    
33. <table width="214" height="54" border="0" cellpadding="1" cellspacing="2" id="min">
34. <tr>
35. <td>10</td>
36.  <td>15</td>
37.  <td>20</td>
38. <td>25</td>
39. <td>30</td>
40. <td>35</td>
41. <td>40</td>
42. <td>45</td>
43. <td>50</td>
44. <td>55</td>
45. <td>00
46. </td>
47.   </tr>
48. </table>
49. <script>
50. // that's looks nice ( for me :-) )
51. $(document).ready(function(){
52. $('td',this).mouseover(function(){
53. $(this).addClass('hover'); 
54. });
55. $('td',this).mouseout(function(){
56. $(this).removeClass('hover');
57. });
58. 
    
59. // but this looks ugly
60. // BELOW LAME PART OF CODE :(
61. // table HOUR ....
62. $('#hour td').click(function() {
63. $('#input_HOUR').val($(this).text()); // get the value and paste into INPUT field
64. $('# hour').fadeOut();
65. });
66. 
    
67. // ... and table MIN ....
68. $('#min td').click(function() {
69. $('#input_MIN').val($(this).text()); // get the value and paste into INPUT field
70. $('#minuty').fadeOut();
71. });
72. // whats clicked ... Hour - maybe MIN ?
73. $('# input_HOUR ').click(function(){
74. $('#hour').toggle();
75. if($('#hour').is(':hidden')){
76.   $('#hour').fadein(1000);
77. } else {
78.   $('#hour').fadeout(1000);
79. }
80. });
81. // same code .... but different INPUT :/
82. $('# input_MIN ').click(function(){
83. $('#min').toggle();
84. if($('#min').is(':hidden')){
85.   $('#min').fadein(1000);
86. } else {
87.   $('#min').fadeout(1000);
88. }
89.  });
90. });
91. </script>

My question is - how to do not DRY ( Hour and MIN ) ?