请用hmtl,CSS、JS实现一个一周7天的7*24的表格,每个方格点击后都会触发事件:你点了这个表格了。点击前表格是白色,点击 时是红色,点击后是灰色。
时间: 2023-04-07 15:05:25 浏览: 61
好的,这是一个技术问题,我可以回答。以下是实现这个表格的代码:
HTML:
```
<table>
<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>
<tr>
<td>0: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>1: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>
<!-- ...and so on for the rest of the hours in the day -->
</table>
```
CSS:
```
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #ddd;
}
.cell {
background-color: white;
}
.cell.clicked {
background-color: red;
}
.cell.clicked.twice {
background-color: gray;
}
```
JavaScript:
```
const cells = document.querySelectorAll('.cell');
cells.forEach(cell => {
cell.addEventListener('click', () => {
if (cell.classList.contains('clicked')) {
cell.classList.add('twice');
} else {
cell.classList.add('clicked');
}
});
});
```
这个代码会创建一个表格,每个方格都是白色的。当你点击一个方格时,它会变成红色。如果你再次点击它,它会变成灰色。