Edgar Bots Ответов: 1

Как я могу закодировать план сидения, как в кинотеатре, но в данном случае он находится в автобусе.

Сиденья-это кнопка, и если вы нажмете на нее, она изменит цвет на красный, а если вы ее разожмете, она снова станет белой. (пожалуйста, помогите, извините за плохой английский) c#

Что я уже пробовал:

Я попытался скопировать коды дизайна с веб-сайта.
<div id="divSeatPlan"><a href="#!" class="btn-seat seat-crew" data-seat-no="1"><span>1</span></a>&nbsp;<a href="#!" class="btn-seat seat-crew" data-seat-no="2"><span>2</span></a>&nbsp;<div class="spacing"></div>&nbsp;<a href="#!" class="btn-seat seat-booked" data-seat-no="3"><span>3</span></a>&nbsp;<div class="spacing"></div>&nbsp;<br><a href="#!" class="btn-seat" data-seat-no="4"><span>4</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="5"><span>5</span></a>&nbsp;<div class="spacing"></div>&nbsp;<a href="#!" class="btn-seat" data-seat-no="6"><span>6</span></a>&nbsp;<div class="spacing"></div>&nbsp;<br><a href="#!" class="btn-seat" data-seat-no="7"><span>7</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="8"><span>8</span></a>&nbsp;<div class="spacing"></div>&nbsp;<a href="#!" class="btn-seat" data-seat-no="9"><span>9</span></a>&nbsp;<div class="spacing"></div>&nbsp;<br><a href="#!" class="btn-seat" data-seat-no="10"><span>10</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="11"><span>11</span></a>&nbsp;<div class="spacing"></div>&nbsp;<a href="#!" class="btn-seat" data-seat-no="12"><span>12</span></a>&nbsp;<div class="spacing"></div>&nbsp;<br><a href="#!" class="btn-seat" data-seat-no="13"><span>13</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="14"><span>14</span></a>&nbsp;<div class="spacing"></div>&nbsp;<div class="spacing"></div>&nbsp;<div class="spacing"></div>&nbsp;<br><a href="#!" class="btn-seat" data-seat-no="15"><span>15</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="16"><span>16</span></a>&nbsp;<div class="spacing"></div>&nbsp;<div class="spacing"></div>&nbsp;<div class="spacing"></div>&nbsp;<br><a href="#!" class="btn-seat" data-seat-no="17"><span>17</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="18"><span>18</span></a>&nbsp;<div class="spacing"></div>&nbsp;<a href="#!" class="btn-seat" data-seat-no="19"><span>19</span></a>&nbsp;<div class="spacing"></div>&nbsp;<br><a href="#!" class="btn-seat" data-seat-no="20"><span>20</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="21"><span>21</span></a>&nbsp;<div class="spacing"></div>&nbsp;<a href="#!" class="btn-seat" data-seat-no="22"><span>22</span></a>&nbsp;<div class="spacing"></div>&nbsp;<br><a href="#!" class="btn-seat" data-seat-no="23"><span>23</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="24"><span>24</span></a>&nbsp;<div class="spacing"></div>&nbsp;<a href="#!" class="btn-seat" data-seat-no="25"><span>25</span></a>&nbsp;<div class="spacing"></div>&nbsp;<br><a href="#!" class="btn-seat" data-seat-no="26"><span>26</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="27"><span>27</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="28"><span>28</span></a>&nbsp;<a href="#!" class="btn-seat" data-seat-no="29"><span>29</span></a>&nbsp;<div class="spacing"></div>&nbsp;<br><div class="spacing"></div>&nbsp;<div class="spacing"></div>&nbsp;<div class="spacing"></div>&nbsp;<div class="spacing"></div>&nbsp;<div class="spacing"></div>&nbsp;<br></div>


Вот код плана сиденья

1 Ответов

Рейтинг:
2

Karthik_Mahalingam

Демонстрация - JSFiddle[^]

пробовать

<!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>

Edgar Bots

Есть ли какой-нибудь способ изменить цвет, например, красный=принято, зеленый=выбор места, и как я могу ограничить количество мест, которые будут выбраны? Большое вам спасибо за помощь

Karthik_Mahalingam

Привет Эдгар,
да, есть много способов сделать это.

вы просите меня сделать весь проект целиком

Edgar Bots

- Простите, сэр. Но есть ли способ занять и выбрать место? Вы использовали java-скрипт, а я не знаю, как его использовать. Искренне сожалею еще раз и благодарю вас за помощь

Karthik_Mahalingam

как только места выбраны , информация о них должна быть сохранена в базе данных. на основе информации о сиденьях изменяются цвета сидений. и т. д..

Natasha Singh Delhi

Привет Картик,
Я также разрабатываю макет сиденья кинотеатра с использованием Asp.net (vb) и MS SQL SERVER. Я реализовал ваши коды для компоновки сидений, и они работают нормально. чего я не понимаю, так это как мне захватить номера сидений и получить то же самое с кодом позади них. asp.net или просто как захватить значения javascript и сохранить их в метке или строке, чтобы я мог сохранить их в своей базе данных. Пожалуйста, помогите мне записать номера сидений. Я был бы благодарен за быстрый ответ.
Спасибо
Наташа

Karthik_Mahalingam

используйте скрытое поле

Natasha Singh Delhi

Пожалуйста, мне нужны коды ... не понимаю, как поступить с теми, которые выбраны

Karthik_Mahalingam

:(