```html
深圳春茧体育馆座位图
body {
fontfamily: Arial, sansserif;
margin: 0;
padding: 0;
}
.container {
maxwidth: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
textalign: center;
}
.seatmap {
display: grid;
gridtemplatecolumns: repeat(autofill, minmax(50px, 1fr));
gap: 5px;
}
.seat {
width: 50px;
height: 50px;
backgroundcolor: ddd;
border: 1px solid aaa;
display: flex;
justifycontent: center;
alignitems: center;
fontsize: 12px;
cursor: pointer;
}
.seat.available {
backgroundcolor: 7fff00;
cursor: pointer;
}
.seat.reserved {
backgroundcolor: ff4500;
cursor: notallowed;
}
>
// Dummy data for seat availability (can be replaced with actual data)
const seatAvailability = {
A1: 'available',
A2: 'reserved',
A3: 'available',
// Add more seat availability data here...
};
document.addEventListener('DOMContentLoaded', () => {
const seatMap = document.querySelector('.seatmap');
// Function to create seat elements dynamically
const createSeatElement = (seatNumber, status) => {
const seat = document.createElement('div');
seat.classList.add('seat', status);
seat.textContent = seatNumber;
return seat;
};
// Generate seat elements based on seat availability data
for (let row = 1; row <= 10; row ) {
for (let seatNum = 1; seatNum <= 10; seatNum ) {
const seatId = String.fromCharCode(64 row) seatNum;
const seatStatus = seatAvailability[seatId] || 'available';
const seatElement = createSeatElement(seatId, seatStatus);
seatMap.appendChild(seatElement);
}
}
});