我是php的新手。我制作了一个页面,用户可以在其中登录并预订会议室。我使用表格来显示时间段。单击时间段时,会出现一个表单,用户在其中输入详细信息。单击提交后,数据将插入到数据库中。但是,如果刷新页面,表格中的颜色将消失,或者不存在该颜色的任何其他用户登录。
<?php
session_start();
?>
<html>
<head><title>MRA</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<style>
.name-error,
.meeting-error
{
color: red;
margin: 0 10px;
}
#plan
{
position: fixed;
left: 50%;
margin-left: -239px;
top: 50%;
margin-top: -150px;
z-index: 10;
background-color: #fff;
padding: 10px;
}
#plan-bg
{
width: 100%;
height: 100%;
position: fixed;
background: #000;
opacity: 0.8;
top: 0;
display: none;
z-index: 5;
}
.close
{
position: absolute;
top: 5px;
right: 10px;
cursor: pointer;
}
.close:hover
{
text-decoration: underline;
}
#datepicker
{
width: 30%;
float: left;
}
.calender-date
{
padding: 0 10px;
}
#time-slot-msg,
#alert-msg
{
position: fixed;
top: 50%;
left: 50%;
background: #fff;
font-size: 25px;
padding: 10px 20px;
margin: -50px 0 0 -184.5px;
display: none;
z-index: 10;
border-radius: 5px;
}
#time-slot-msg p,
#alert-msg p { font-weight: bold; }
#time-slot-msg .close,
#alert-msg .close
{
font-size: 15px;
right: 20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var $index;
$('.meeting-error').hide();
$(".meeting-timetable tr > td + td").click(function(e) {
if($(this).hasClass('active')) {
e.preventDefault();
alert('The selected time slot has already been assigned');
} else {
var $thisVal = $(this).prevAll('td:first-child').text();
$index = $(this).index();
// Start time.
$(".start-time option").each(function() {
if (($(this).text() === $thisVal)) {
$(this).attr('selected', 'selected');
$(this).prevAll().attr('disabled', 'disabled');
}
});
// Change end time.
$(".end-time option").each(function() {
if (($(this).text() === $thisVal)) {
$(this).next().attr('selected', 'selected');
$(this).attr('disabled', 'disabled');
$(this).prevAll().attr('disabled', 'disabled');
}
});
// Date input select.
var $date = $('.meeting-timetable tr:first-child th').text();
var dateFormat = $.datepicker.formatDate('yy-mm-dd', new Date($date));
$('.date').val(dateFormat);
$('#meeting').val('');
$('.meeting-error').hide();
// Show dialog box.
$('#plan, #plan-bg').fadeIn();
}
});
// On submit click change background color.
$('.submit-button').click(function(e) {
e.preventDefault();
var selectedValue = $(".start-time option:selected").text(),
selectedEndValue = $(".end-time option:selected").text(),
$name = $('input[name=txtname]').val();
if($('#meeting').val()) {
$(".meeting-timetable tr > td").each(function() {
if ($(this).text() === selectedValue) {
$(this).parent('tr').addClass('active');
var $active1 = $(this).nextAll().eq($index - 1).css('background-color', 'orange').addClass('active').attr("title", $name);
}
if ($(this).text() === selectedEndValue) {
$(this).nextAll().eq($index - 1).css('background-color', 'orange').addClass('active').attr("title", $name);
var $parent = $(this).parent('tr').prevUntil('tr.active').addClass('active');
}
// Prev all td selected.
$($parent).each(function(){
$(this).children('td').nextAll().eq($index - 1).css('background-color', 'orange').addClass('active').attr("title", $name);
});
});
}
// Form validation.
if ($('#meeting').val() === '') {
$('.meeting-error').fadeIn();
}
// Grab form values
var formData = {
'txtrname' : $('input[name=txtrname]').val(),
'txtname' : $('input[name=txtname]').val(),
'txtpurpose' : $('input[name=txtpurpose]').val(),
'attendee' : $('select[name=attendee]').val(),
'txtdate' : $('input[name=txtdate]').val(),
'btime' : $('select[name=btime]').val(),
'etime' : $('select[name=etime]').val()
};
if($('#meeting').val().trim()) {
// Ajax form submit.
$.ajax({
type: "POST",
url: "insert.php",
data: formData,
success: function()
{
$('#alert-msg').fadeIn();
$('#plan').fadeOut();
}
});
} else {
alert('Please enter the purpose of meeting');
}
});
// on focus function
$('#meeting').focus(function() {
$('.meeting-error').fadeOut();
}).blur(function() {
if (!$(this).val()) {
$('.meeting-error').fadeIn();
}
});
// Reset button functionality.
$('.reset-button').click(function() {
$('.inputDisabled').prop("disabled", false);
$(".start-time option, .end-time option").removeAttr('disabled', 'disabled');
$('.start-time option, .end-time option').removeAttr('selected', 'selected');
$('.end-time option:eq(0)').attr('disabled', 'disabled');
$('.end-time option:eq(1)').attr('selected', 'selected');
$('.meeting-error').hide();
});
$(".close").click(function() {
$('.pop-up').fadeOut();
});
$('.calender-date').html($.datepicker.formatDate('d MM, yy', new Date()));
// Adding calender.
$( "#datepicker" ).datepicker({
minDate: 0,
dateFormat: "d MM, yy",
onSelect: function (date) {
$('.calender-date').text(date);
}
});
});
</script>
</head>
<body bgcolor="#BEBCBC">
<h3 align="right"><a href="#">Home</a>
<?php
echo ucwords($_SESSION['usr_name']);
?>
<a href="logout.php">Logout</a></h3>
<table border="1" align="right" width="70%">
<tr><td colspan="3" align="center"><h1>Click to Book a Time Slot</h1></td> </tr>
<tr><td bgcolor="red" align="center">Booked</td><td align="center" bgcolor="orange">Requested</td><td align="center" bgcolor="Green">Available</td> </td></tr>
<tr><td colspan="3">| <a href="1today.php"> Today </a> |</td></tr></table>
<table class="meeting-timetable" border="1" align="right" width="70%">
<tr><th colspan="2" class="calender-date" align="center"></th></tr>
<tr><td align="center" width="10%">8:00 a.m</td><td></td></tr>
<tr><td align="center">8:30 a.m</td><td></td></tr>
<tr><td align="center">9:00 a.m</td><td></td></tr>
<tr><td align="center">9:30 a.m</td><td></td></tr>
<tr><td align="center">10:00 a.m</td><td></td></tr>
<tr><td align="center">10:30 a.m</td><td></td></tr>
<tr><td align="center">11:00 a.m</td><td></td></tr>
<tr><td align="center">11:30 a.m</td><td></td></tr>
<tr><td align="center">12:00 p.m</td><td></td></tr>
<tr><td align="center">12:30 p.m</td><td></td></tr>
<tr><td align="center">1:00 p.m</td><td></td></tr>
<tr><td align="center">1:30 p.m</td><td></td></tr>
<tr><td align="center">2:00 p.m</td><td></td></tr>
<tr><td align="center">2:30 p.m</td><td></td></tr>
<tr><td align="center">3:00 p.m</td><td></td></tr>
<tr><td align="center">3:30 p.m</td><td></td></tr>
<tr><td align="center">4:00 p.m</td><td></td></tr>
<tr><td align="center">4:30 p.m</td><td></td></tr>
<tr><td align="center">5:00 p.m</td><td></td></tr>
<tr><td align="center">5:30 p.m</td><td></td></tr>
<tr><td align="center">6:00 p.m</td><td></td></tr>
<tr><td align="center">6:30 p.m</td><td></td></tr>
<tr><td align="center">7:00 p.m</td><td></td></tr>
<tr><td align="center">7:30 p.m</td><td></td></tr>
<tr><td align="center">8:00 p.m</td><td></td></tr>
</table>
<div id="plan" class="pop-up" style="display :none ">
<span class="close">Close</span>
<form align="center" method="post" id="inform">
<h1 align="center">Meeting Details</h1>
<table>
<tr><td><b>Room : </td><td><input type="text" name="txtrname" value="Karma" readonly></td></tr>
<tr><td><b>Name :</td><td><input type="text" name="txtname" readonly value=" <?php echo ucwords($_SESSION['usr_name']); ?>" ></td></tr>
<tr><td><b>Purpose of Meeting :</td><td> <input id="meeting" type="text" name="txtpurpose"></td></tr>
<tr><td><b>No. of Attendee :</td><td><select name="attendee"><option value="1">1</option><option value="2">2</option><option value="3">3</option> </select></td></tr>
<tr><td><b>Date :</td><td> <input class="date" type="text" name="txtdate" readonly value="yyyy/mm/dd"></td></tr>
<tr><td><b>Time : </td><td>Start Time <select class="start-time" name="btime">
<option value="8:00 a.m">8:00 a.m</option>
<option value="8:30 a.m">8:30 a.m</option>
<option value="9:00 a.m">9:00 a.m</option>
<option value="9:30 a.m">9:30 a.m</option>
<option value="10:00 a.m">10:00 a.m</option>
<option value="10:30 a.m">10:30 a.m</option>
<option value="11:00 a.m">11:00 a.m</option>
<option value="11:30 a.m">11:30 a.m</option>
<option value="12:00 p.m">12:00 p.m</option>
<option value="12:30 p.m">12:30 p.m</option>
<option value="1:00 p.m">1:00 p.m</option>
<option value="1:30 p.m">1:30 p.m</option>
<option value="2:00 p.m">2:00 p.m</option>
<option value="2:30 p.m">2:30 p.m</option>
<option value="3:00 p.m">3:00 p.m</option>
<option value="3:30 p.m">3:30 p.m</option>
<option value="4:00 p.m">4:00 p.m</option>
<option value="4:30 p.m">4:30 p.m</option>
<option value="5:00 p.m">5:00 p.m</option>
<option value="5:30 p.m">5:30 p.m</option>
<option value="6:00 p.m">6:00 p.m</option>
<option value="6:30 p.m">6:30 p.m</option>
<option value="7:00 p.m">7:00 p.m</option>
<option value="7:30 p.m">7:30 p.m</option>
<option value="8:00 p.m" disabled>8:00 p.m</option>
</select>
- End Time <select class="end-time" name="etime">
<option value="8:00 a.m">8:00 a.m</option>
<option value="8:30 a.m">8:30 a.m</option>
<option value="9:00 a.m">9:00 a.m</option>
<option value="9:30 a.m">9:30 a.m</option>
<option value="10:00 a.m">10:00 a.m</option>
<option value="10:30 a.m">10:30 a.m</option>
<option value="11:00 a.m">11:00 a.m</option>
<option value="11:30 a.m">11:30 a.m</option>
<option value="12:00 p.m">12:00 p.m</option>
<option value="12:30 p.m">12:30 p.m</option>
<option value="1:00 p.m">1:00 p.m</option>
<option value="1:30 p.m">1:30 p.m</option>
<option value="2:00 p.m">2:00 p.m</option>
<option value="2:30 p.m">2:30 p.m</option>
<option value="3:00 p.m">3:00 p.m</option>
<option value="3:30 p.m">3:30 p.m</option>
<option value="4:00 p.m">4:00 p.m</option>
<option value="4:30 p.m">4:30 p.m</option>
<option value="5:00 p.m">5:00 p.m</option>
<option value="5:30 p.m">5:30 p.m</option>
<option value="6:00 p.m">6:00 p.m</option>
<option value="6:30 p.m">6:30 p.m</option>
<option value="7:00 p.m">7:00 p.m</option>
<option value="7:30 p.m">7:30 p.m</option>
<option value="8:00 p.m">8:00 p.m</option>
</select>
</td></tr>
<tr><td></td>
<td><input class="submit-button" type="submit" value="Submit">
</td></tr>
</table>
</form>
</div>
<div id="plan-bg" class="pop-up"></div>
<div id="alert-msg" class="pop-up"><span class="close">Close</span><p>Your request has been sent to admin.</p></div>
<div id="time-slot-msg" class="pop-up"><span class="close">Close</span> <p>This time slot is already booked.</p></div>
<div id="datepicker"></div>
</body>
</html>
这是因为您没有查找会议数据并将"活动"css 类添加到构建表时已预订的时间段。如果您不在需要时使用它,则存储数据是没有用的。
这意味着您需要在代码中查询以返回预订,并需要一个循环控件来检查每个时隙是否已预订。如果有,请将活动的 css 类添加到该 td。
<td class="active">
因此,修改您的代码以检索预订,并在使用新代码时提出更多问题。
PS 而不是直接添加背景色,而是将其定义为活动类的背景色。然后,只需添加类即可产生所需的效果。