请用hmtl,CSS、JS实现一个一周7天的7*24的表格,每个方格也是一个独立的按钮,被点击后都会触发事件:表格被点击了。点击前表格是白色,点击 时是红色,点击后是灰色。
时间: 2023-04-07 21:05:32 浏览: 57
好的,这是一个技术问题,我可以回答。以下是实现一个一周7天的7*24的表格,每个方格也是一个独立的按钮,被点击后都会触发事件的代码:
HTML:
```
<table>
<thead>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td>00:00</td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr>
<td>01:00</td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<!-- ... -->
<tr>
<td>23:00</td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</tbody>
</table>
```
CSS:
```
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.cell {
background-color: white;
cursor: pointer;
}
.cell.clicked {
background-color: gray;
}
.cell:hover {
background-color: red;
}
```
JS:
```
const cells = document.querySelectorAll('.cell');
cells.forEach(cell => {
cell.addEventListener('click', () => {
cell.classList.add('clicked');
});
});
```
这样就可以实现一个一周7天的7*24的表格,每个方格也是一个独立的按钮,被点击后都会触发事件的功能。