用html和js写一个可以安排座位并清空座位的座位表
时间: 2023-11-27 14:50:32 浏览: 36
好的,以下是一个简单的 HTML 和 JavaScript 座位表代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>座位表</title>
<style>
table, td {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>座位表</h1>
<table>
<tr>
<td id="seat1" onclick="selectSeat('seat1')">1</td>
<td id="seat2" onclick="selectSeat('seat2')">2</td>
<td id="seat3" onclick="selectSeat('seat3')">3</td>
<td id="seat4" onclick="selectSeat('seat4')">4</td>
</tr>
<tr>
<td id="seat5" onclick="selectSeat('seat5')">5</td>
<td id="seat6" onclick="selectSeat('seat6')">6</td>
<td id="seat7" onclick="selectSeat('seat7')">7</td>
<td id="seat8" onclick="selectSeat('seat8')">8</td>
</tr>
<tr>
<td id="seat9" onclick="selectSeat('seat9')">9</td>
<td id="seat10" onclick="selectSeat('seat10')">10</td>
<td id="seat11" onclick="selectSeat('seat11')">11</td>
<td id="seat12" onclick="selectSeat('seat12')">12</td>
</tr>
</table>
<br>
<button onclick="clearSeats()">清空</button>
<script>
var selectedSeats = [];
function selectSeat(seatId) {
var seat = document.getElementById(seatId);
if (selectedSeats.includes(seatId)) {
seat.style.backgroundColor = "white";
var index = selectedSeats.indexOf(seatId);
selectedSeats.splice(index, 1);
} else {
seat.style.backgroundColor = "green";
selectedSeats.push(seatId);
}
}
function clearSeats() {
selectedSeats.forEach(function(seatId) {
var seat = document.getElementById(seatId);
seat.style.backgroundColor = "white";
});
selectedSeats = [];
}
</script>
</body>
</html>
```
这个代码创建了一个简单的 3x4 座位表,每个座位都是一个单元格,单元格的 ID 是“seat”加上座位的编号。当单击座位时,座位的背景颜色会更改为绿色,表示已选择。如果再次单击已选择的座位,则取消选择并将背景颜色重置为白色。“清空”按钮将取消所有选择。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)