Как нарисовать схему мест вагона?
Пытаюсь сделать что-то похожее, на деле фигня какая-то. Даже блок на линии поделить не выходит, ячейки уезжают. Может кто подскажет как подправить?
$(document).ready(function(){
let div;
let option;
let finalprice;
{
for(let i=1;i<=20;i++){
div = document.createElement('div');
div.className = "seatPB";
div.id=i;
div.innerHTML=i;
$('#seat1').append(div);
}
for(let i=21;i<=40;i++){
div = document.createElement('div');
div.className = "seatPB";
div.id=i;
div.innerHTML=i;
$('#seat2').append(div);
}
}
$('#seat').width='1360px';
for(let i=21;i<=35;i++){
div = document.createElement('div');
div.className = "seatPB";
div.id=i;
div.innerHTML=i;
$('#seat1').append(div);
}
$('.seatPB').click(function(event) {
for(let i=1;i<=140;i++){
$('#'+i).removeClass('active');
}
$(this).addClass('active');
i=event.target.id;
$('#seatform').text('Место: '+i);
$('#seatsel').empty();
option = document.createElement('option');
option.value='Бизнесс';
option.innerHTML='Бизнесс';
$('#seatsel').append(option);
finalprice=$('#price').val()*1;
$('#priceOUT').text('Цена: '+finalprice+'₽');
$('#place').val(i);
});
$('.seatP').click(function(event) {
for(let i=1;i<=140;i++){
$('#'+i).removeClass('active');
}
i=event.target.id;
$(this).addClass('active');
$('#seatform').text('Место: '+i);
$('#seatsel').empty();
option = document.createElement('option');
option.value='Эконом';
option.innerHTML='Эконом';
$('#seatsel').append(option);
option = document.createElement('option');
option.value='Эконом+';
option.innerHTML='Эконом+';
$('#seatsel').append(option);
finalprice=$('#price').val()*1;
$('#priceOUT').text('Цена: '+finalprice+'₽');
$('#placephp').val(i);
});
$('#seatsel').change(function(){
if ($('#seatsel').val()=='Эконом'){
finalprice=$('#price').val()*1;
$('#priceOUT').text('Цена: '+finalprice+'₽');
}else{
finalprice=$('#price').val()*2;
$('#priceOUT').text('Цена: '+finalprice+'₽');
}
});
});#seat{
border: 1px solid black;
width: 1200px;
height: 300px;
margin-right:auto ;
margin-left: auto;
margin-top: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#seat1{
border: 1px solid black;
width: 100%;
height: 40%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
#seat2{
border: 1px solid black;
width: 100%;
height: 20%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
.seatP,.seatPB{
border: 1px solid black;
width: 22px;
height: 45px;
margin: 5px;
text-align: center;
}
.seatPB{
background-color: yellow;
color: black;
}
.seatP{
background-color: black;
color: white;
}
.seatP:hover,.seatPB:hover{
filter: invert(75%);
}
.bar-line__right {
flex: 1;
padding:50px;
border: 1px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="seat">
<div id="seat1">
</div>
<div id="seat2"></div>
</div>Источник: Stack Overflow на русском