请用hmtl,CSS、JS实现一个一周7天的7*24的表格,每个方格也是一个独立的按钮,被点击后都会触发事件:表格被点击了。单击前表格是色,单击时是红色,单击后是灰色。
时间: 2023-04-07 20:05:34 浏览: 77
好的,这是一个技术问题,我可以回答。以下是一个示例代码,实现了一个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>
<th>00:00</th>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
</tr>
<tr>
<th>01:00</th>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></td>
<td><button class="cell"></button></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 {
width: 100%;
height: 100%;
background-color: #ddd;
border: none;
cursor: pointer;
}
.cell.clicked {
background-color: red;
}
.cell.disabled {
background-color: gray;
cursor: default;
}
```
JavaScript代码:
```
var cells = document.querySelectorAll('.cell');
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener('click', function() {
if (this.classList.contains('disabled')) {
return;
}
this.classList.toggle('clicked');
if (this.classList.contains('clicked')) {
this.classList.remove('disabled');
} else {
this.classList.add('disabled');
}
});
}
```
这个代码实现了一个7*24的表格,每个方格都是一个按钮,可以被点击并触发事件。单击前表格是灰色,单击时是红色,单击后是灰色。