設置休息日是Web開發中很常見的需求之一,使用jQuery可以很方便地實現此功能。
我們可以先在HTML中定義一個表格來展示日歷:
<table> <thead> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <!-- 省略中間的日期 --> </tbody> </table>
接著,我們可以使用jQuery來設置休息日的樣式。假設我們要將周六、周日設置為休息日,代碼如下:
$('tr td:nth-child(6), tr td:nth-child(7)').addClass('rest');
這段代碼將選擇每個
.rest { background-color: #ddd; }
這樣就實現了將休息日用不同的背景顏色區分出來的效果。