<html>
<head>
<title>Seat Reservation </title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form id="form111" >
<script type="text/javascript"
src="js/jquery.js">
</script>
<div id="screen"><p class= "pos_fixed">S C R E E N</p></div>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="width:600px;text-align:center;overflow:auto">
<ul id="seatDescription">
<li style="background:url('images/available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('images/booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('images/selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul> </div>
<div style="width:580px;text-align:left;margin:5px">
<input type="button" id="btnShowNew" value="Show Selected Seats" name="btnShowNew" /><input type="button" id="btnShow" value="Show All" /> </form>
<table width="300" border="0" >
<tr>
<form name="form1" method="post" action="login.html">
<td>
<table width="100%" border="0" >
<tr>
<td width="294"><input type="submit" name="Submit" value="Logout"></td>
</tr>
</form>
<form method="post" id="reserveid">
<td>
<table width="100%" border="0" >
<tr>
<td width="294"><input type="button" value="reserve""></td>
</tr>
</form>
<form id="cvvform" method="post" action="checkcvv.php">
<td>
<table width="100%" border="0" >
<tr>
<td width="294"><input type="submit" name="cvvchecking" value="cvvchecking" id="cvvchecking"></td>
</tr>
<tr>
<td>CVV<input type="text" maxlength="4" id="cvvchecking" name="cvvchecking" /></td>
<td>USERNAME<input type="text" id="username" name="username" /></td>
</tr>
</form>
<script type="text/javascript">
$(function () {
var settings = {
rows: 5,
cols: 15,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
};
//case I: Show from starting
init();
//Case II: If already booked
var bookedSeats = [];
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () {
var str = [], seatid;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
seatid = $(this).attr('title');
str.push(seatid);
});
alert(str.join(' , '));
})
})
</script>
このコードはすべて正常に機能しています...「btnShowNew」はユーザーがクリックしたシートIDを出力します...ユーザーがクリックしたときにボタン「予約」を作成する必要がありますフォームbtnShowNew内のseatidの値は次のようになりますデータベースに追加