Theater Clinder
-
Hello. Tell me how best to cross the tablet. Interests the elements themselves to push and maintain their condition. And whatever the table is. I thought I'd make buttons, but 300 buttons it's too much.
-
I did without a button, added a show of the tickets purchased.
// план зала по рядам общая вместительность 300 мест // планов может быть и больше... и разные... var cinemaHall1 = { row: [10, 20, 30, 30, 30, 30, 30, 30, 30, 30, 30] }, cinemaHallMap = ''; $.each(cinemaHall1.row, function(row, numberOfSeats) { cinemaHallRow = ''; for (i = 1; i <= numberOfSeats; i++) { // собираем ряды cinemaHallRow += '<div class="seat" data-row="' + i + '" data-seat="' + i + '"> </div>'; } //собираем зал с проходами между рядами cinemaHallMap += cinemaHallRow + '<div class="passageBetween"> </div>'; });//заполняем в html зал номер 1
$('.zal1').html(cinemaHallMap);
// тут по клику определяем что место выкуплено
$('.seat').on('click', function(e) {
// если первый раз кликнули билет выкупили,
// если повторно значит вернули билет
$(e.currentTarget).toggleClass('bay');
//показываем сколько билетов выкуплено
showBaySeat();
});function showBaySeat() {
result = '';
//ищем все места купленные и показываем список выкупленных мест
$.each($('.seat.bay'), function(key, item) {
result += '<div class="ticket">Ряд: ' +
$(item).data().row + ' Место:' +
$(item).data().seat + '</div>';
});$('.result').html(result);
}.cinemaHall {
text-align: center;
display: inline-block;
vertical-align: top;
}
.seat {
height: 10px;
width: 10px;
margin-right: 2px;
background-color: #999999;
display: inline-block;
cursor: pointer;
}
.passageBetween {
height: 1px;
width: 100%;
display: block;
}
.bay {
background-color: red;
}
.result {
font-size: 10px;
display: inline-block;
width: 90px;
max-height: 200px;
overflow-y: auto;
margin-right: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><body>
<div class='result'>
</div>
<div class='cinemaHall zal1'></div></body>
