我怎样才能像在电影院那样编写座位计划，但在这种情况下，它是在公共汽车上。 [英] How can I code a seat plan like in the cinema but in this case it is in a bus.
本文介绍了我怎样才能像在电影院那样编写座位计划，但在这种情况下，它是在公共汽车上。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
座位是一个按钮，如果单击按钮，它会将颜色更改为红色，如果您取消它，它将再次变为白色。 （请帮忙，抱歉英文不好）c＃
我尝试过的事情：
我尝试从网站上复制设计代码。
The seats is a button and if click the button it will change the color to red and if you unclick it, it will become white again. (please help, sorry for bad english) c#
What I have tried:
I tried copying the design codes from a website.
<div id="divSeatPlan"><a href="#!" class="btn-seat seat-crew" data-seat-no="1"><span>1</span></a> <a href="#!" class="btn-seat seat-crew" data-seat-no="2"><span>2</span></a> <div class="spacing"></div> <a href="#!" class="btn-seat seat-booked" data-seat-no="3"><span>3</span></a> <div class="spacing"></div> <br><a href="#!" class="btn-seat" data-seat-no="4"><span>4</span></a> <a href="#!" class="btn-seat" data-seat-no="5"><span>5</span></a> <div class="spacing"></div> <a href="#!" class="btn-seat" data-seat-no="6"><span>6</span></a> <div class="spacing"></div> <br><a href="#!" class="btn-seat" data-seat-no="7"><span>7</span></a> <a href="#!" class="btn-seat" data-seat-no="8"><span>8</span></a> <div class="spacing"></div> <a href="#!" class="btn-seat" data-seat-no="9"><span>9</span></a> <div class="spacing"></div> <br><a href="#!" class="btn-seat" data-seat-no="10"><span>10</span></a> <a href="#!" class="btn-seat" data-seat-no="11"><span>11</span></a> <div class="spacing"></div> <a href="#!" class="btn-seat" data-seat-no="12"><span>12</span></a> <div class="spacing"></div> <br><a href="#!" class="btn-seat" data-seat-no="13"><span>13</span></a> <a href="#!" class="btn-seat" data-seat-no="14"><span>14</span></a> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <br><a href="#!" class="btn-seat" data-seat-no="15"><span>15</span></a> <a href="#!" class="btn-seat" data-seat-no="16"><span>16</span></a> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <br><a href="#!" class="btn-seat" data-seat-no="17"><span>17</span></a> <a href="#!" class="btn-seat" data-seat-no="18"><span>18</span></a> <div class="spacing"></div> <a href="#!" class="btn-seat" data-seat-no="19"><span>19</span></a> <div class="spacing"></div> <br><a href="#!" class="btn-seat" data-seat-no="20"><span>20</span></a> <a href="#!" class="btn-seat" data-seat-no="21"><span>21</span></a> <div class="spacing"></div> <a href="#!" class="btn-seat" data-seat-no="22"><span>22</span></a> <div class="spacing"></div> <br><a href="#!" class="btn-seat" data-seat-no="23"><span>23</span></a> <a href="#!" class="btn-seat" data-seat-no="24"><span>24</span></a> <div class="spacing"></div> <a href="#!" class="btn-seat" data-seat-no="25"><span>25</span></a> <div class="spacing"></div> <br><a href="#!" class="btn-seat" data-seat-no="26"><span>26</span></a> <a href="#!" class="btn-seat" data-seat-no="27"><span>27</span></a> <a href="#!" class="btn-seat" data-seat-no="28"><span>28</span></a> <a href="#!" class="btn-seat" data-seat-no="29"><span>29</span></a> <div class="spacing"></div> <br><div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <br></div>
这是座位计划的代码
Here is the code of the seat plan
推荐答案
演示 - JSFiddle [ ^ ]
试试
Demo - JSFiddle[^]
try
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.seat {
height: 20px;
width: 20px;
border: 1px solid gray;
cursor:pointer;
background-color:white;
}
.walk{
padding-left:20px;
}
#driver {
background-color:gray;
height: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<div style="border:1px solid gray; width:130px;">
<table>
<tr>
<td colspan="4"></td>
<td align="right"> <div id="driver"></div> </td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
<tr>
<td><div class="seat"></div> </td>
<td><div class="seat"></div></td>
<td class="walk"> </td>
<td><div class="seat"></div></td>
<td><div class="seat"></div></td>
</tr>
</table>
</div>
<script>
allSeats = document.querySelectorAll('.seat');
for (var i = 0; i < allSeats.length; i++) {
var seat = allSeats[i];
seat.addEventListener('click', function () {
var bgclr = this.style.backgroundColor;
if(bgclr =='red')
this.style.backgroundColor = 'white'
else
this.style.backgroundColor = 'red'
debugger
}, false);
}
</script>
</body>
</html>
这篇关于我怎样才能像在电影院那样编写座位计划，但在这种情况下，它是在公共汽车上。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
