Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
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.
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>


Here is the code of the seat plan
Posted
Updated 10-Oct-17 19:15pm

1 solution

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>
 
Share this answer
 
v2
Comments
Edgar Bots 11-Oct-17 6:58am    
Is there any way to change the color like for red=taken, green=choosing of seat, and how can i limit the number of seat to be selected? Thank you very much for help
Karthik_Mahalingam 11-Oct-17 7:03am    
Hi Edgar,
yes there are many ways to do it.

you are asking me to do the entire project
Edgar Bots 11-Oct-17 8:00am    
Sorry sir. But is there any way for the taken and choosing seat? You used java script and i have no knowledge of using it. Truly im sorry again and thank you for help
Karthik_Mahalingam 11-Oct-17 8:05am    
once the seats are selected , the seat information should be stored in the database. based on the seat information the seats colors are changed. etc etc..
Natasha Singh Delhi 12-Nov-17 2:54am    
Hi Karthik,
I am also designing a movie theatre seat layout using Asp.net(vb) and MS SQL SERVER. I implemented your codes for the seat layout and its working fine. what i don't understand is, how do i capture the seat numbers and get the same to the code behind of asp.net or simply how to capture the javascript values and store it may be in a label or string so that i can save the same in my database. Please help me capturing the seat numbers. I would be grateful for a quick response.
Thank you
Natasha

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900