我创建了一个动态日历,其中包含每天的复选框,这将填充,当在下拉框中选择特定年份时,将构建日历。我使用JavaScript构建HTML表,jQuery附加显示它。我的问题是,当在JSP中成功绘制此日历时,用户将输入值复选框,单击按钮将重定向到新 JSP(这将是一个确认屏幕,它将反映在哪里在上一个JSP中创建的日历,以及复选框输入。)
任何人都可以告诉我如何实现这个目标吗?
我构建日历的代码:
// Retrieves the first day of the month (Zero-based.)
function getFirstDay(year, month) {
var firstDate = new Date(year, month, 1)
return firstDate.getDay()
}
// Retrieves the number of days of a specific month.
function getMonthLength(year, month) {
var oneDay = 1000 * 60 * 60 * 24
var thisMonth = new Date(year, month, 1)
var nextMonth = new Date(year, month + 1, 1)
var length = Math.ceil((nextMonth.getTime() - thisMonth
.getTime())
/ oneDay)
return length
}
// Draws the calendar of a specific month in a specific year.
function constructTable(month, year) {
var firstDay = getFirstDay(year, month);
var totalDays = getMonthLength(year, month);
var counter = 1;
var blankCounter = 0;
var done = false;
var months = ["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"];
var propertyName = 'selected' + months[month];
var baseline = '<table class="outputTable" summary="Calendar_'
+ months[month]
+ '"><tr><th colspan="7">'
+ months[month]
+ '</th></tr><tr><th>Sun.</th><th>Mon.</th><th>Tue.</th><th>Wed.</th><th>Thu.</th><th>Fri.</th><th>Sat.</th></tr>';
for (var i = 0; i < 6; i++) {
if (i % 2 == 0) {
baseline += '<tr>';
} else {
baseline += '<tr class="gray">';
}
for (var j = 0; j < 7; j++) {
if (i == 0 && blankCounter < firstDay) {
blankCounter++;
baseline += '<td></td>';
continue;
}
if (counter == totalDays) {
done = true;
}
if (counter <= totalDays) {
var index = counter++
switch (j) {
case 0:
baseline += '<td class="daySunday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 1:
baseline += '<td class="dayMonday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 2:
baseline += '<td class="dayTuesday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 3:
baseline += '<td class="dayWednesday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 4:
baseline += '<td class="dayThursday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 5:
baseline += '<td class="dayFriday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
case 6:
baseline += '<td class="daySaturday"><input type="checkbox" name="'
+ index
+ '"> '
+ index
+ ' </td>';
break;
}
} else {
baseline += '<td></td>';
}
}
baseline += '</tr>';
}
baseline += '</table>';
return baseline;
}