JQuery for Element loop
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<style type="text/css"> div.container {text-align: center; padding-top: 5px;} h2 {background-color: #7ab800; color:white; text-align: center;} table {border: 0px: padding: 0px; border-collapse: collapse; margin:10px;} td {text-align: center; font-size:9pt; border: 1px solid #0075b0; width:20px } td.legend {font-size:10pt; text-align:left; border:0px; padding-right:6px;width:310px} td.outside, td.wing {border: none; } td.wing {background-color: #DCDCDC; width:75px } td.exitLeft {text-align:right;font-weight:bold;} td.exitRight {text-align:left;font-weight:bold;} td.occupied {background-image: url("images/Unavailable.jpg");background-repeat: no-repeat;cursor: not-allowed;} td.aisle {text-align: center; font-size:9pt; border:0x solid #0075b0; width:20px } td.aisleUpper {font-weight:bold; border-top:none; border-bottom: none;} td.aisleUpper {background-color: #333333;border: 0px solid #0075b0; color: white;} td.noseat {border:none; border: 0px solid #0075b0; width:20px; cursor: not-allowed;} td.availableHandicap {background-image: url("images/Handicapped.jpg");background-repeat: no-repeat} td.availableSeat {background-image: url("images/Available.jpg");background-repeat: no-repeat;cursor:pointer;} td.availableSeat.active {background-image: url("images/Selected.jpg");background-repeat: no-repeat;cursor:pointer;} td.blockedSeat {background-image: url("images/Blocked.jpg");background-repeat: no-repeat;cursor: not-allowed;} td.selectedSeat {background-image: url("images/Selected.jpg");background-repeat: no-repeat;cursor:pointer;} td.fontBold {font-weight:bold;} td.fontDarkGrey {color:#A9A9A9;} </style> <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script> $(document).ready(function(){ $(".availableSeat").click(function(){ var id = $(this).attr("id"); $("#SeatNum").val(id); $(".availableSeat.active").each(function(){ $(this).removeClass("active"); }); $(this).toggleClass("active"); }); }); </script> |