通过运行以下代码段来呈现该问题。请选择“整页”选项，然后按结果网页底部附近的“试用”按钮。这将揭示这个问题。
感谢您的帮助， 约翰
<!DOCTYPE html>
<html>
<head>
<title>Gross Pay Calculator for Hourly Employees</title>
</head>
<style>
table
{
border-collapse: collapse;
}
table, td, th
{
border: 1px solid black;
}
</style>
<body>
<h1>
This page represents the beginnings of a gross pay calculator for hourly workers<br>
I am seeking the best technology to accomplish this.
</h1>
<div id="hide_data_div">
<h2>There is no need for the users to see this holiday table but I am leaving it visible now for clarity.<br>
I will need to use several such tables in the final product.<br>
I am hoping to keep my tables and my code in the same file but this is not a requirement.<br>
I do however need to do all the processing on the client computer (no server technology).
</h2>
<table id="holiday_table">
<caption>Holiday Table</caption>
<tr>
<th>Holiday</th>
<th>Month/Day</th>
</tr>
<tr>
<td>New Year's Day</td>
<td>1/1</td>
</tr>
<tr>
<td>President's Day</td>
<td>2/16</td>
</tr>
<tr>
<td>Easter Sunday</td>
<td>4/5</td>
</tr>
<tr>
<td>Memorial Day</td>
<td>5/25</td>
</tr>
<tr>
<td>Independence Day</td>
<td>7/4</td>
</tr>
<tr>
<td>Labor Day</td>
<td>9/7</td>
</tr>
<tr>
<td>Thanks Giving</td>
<td>11/26</td>
</tr>
<tr>
<td>Black Friday</td>
<td>11/27</td>
</tr>
<tr>
<td>Christmas Eve</td>
<td>12/24</td>
</tr>
<tr>
<td>Christmas Day</td>
<td>12/25</td>
</tr>
<tr>
<td>New Year's Eve</td>
<td>12/31</td>
</tr>
</table> <!-- id="holiday_table" -->
</div> <!-- id="hide_data_div" -->
<h2>
I am using the following date to demonstrate what the webpage is supposed to do.<br>
The idea is to input the date for any Sunday and generate a table which shows if any holidays occur during the work week.<br>
Here we are inputing the last Sunday of the year which contains 2 holidays<br>
<input type="date" id="date_select" value = "2015-12-27" readOnly = true >
</h2>
<br>
<button style="height:50px;width:500px;" onclick="create_interactive_table()">Try it</button>
<br>
<br>
<script>
function create_interactive_table()
{
/*Create a div to contain the table we are creating at runtime*/
var div_to_hold_week_table = document.getElementById("week_table_div");
/*Create a headding for the table which contains my question to forum users*/
var h2_to_hold_week_heading = document.getElementById("week_heading_h2");
h2_to_hold_week_heading .appendChild(document.createTextNode("I am from the SQL world of 20 years ago and I am new to JavaScript. My question is as follows:"));
line_break_in_heading = document.createElement('br');
h2_to_hold_week_heading .appendChild(line_break_in_heading);
h2_to_hold_week_heading .appendChild(document.createTextNode("It took a lot of code to select the holidays from the table above and get them into the table below."));
line_break_in_heading = document.createElement('br');
h2_to_hold_week_heading .appendChild(line_break_in_heading);
h2_to_hold_week_heading .appendChild(document.createTextNode("I see this type of problem a lot in my new work."));
line_break_in_heading = document.createElement('br');
h2_to_hold_week_heading .appendChild(line_break_in_heading);
h2_to_hold_week_heading .appendChild(document.createTextNode("It seems to me that there should be some kind of query language...perhaps XML or something else, "));
line_break_in_heading = document.createElement('br');
h2_to_hold_week_heading .appendChild(line_break_in_heading);
h2_to_hold_week_heading .appendChild(document.createTextNode("that can accomplish the very same thing in just a few lines of code."));
line_break_in_heading = document.createElement('br');
h2_to_hold_week_heading .appendChild(line_break_in_heading);
h2_to_hold_week_heading .appendChild(document.createTextNode("Will someone please show me a simpler way to do this?"));
line_break_in_heading = document.createElement('br');
h2_to_hold_week_heading .appendChild(line_break_in_heading);
h2_to_hold_week_heading .appendChild(document.createTextNode("Thank you for your kindness, John"));
line_break_in_heading = document.createElement('br');
h2_to_hold_week_heading .appendChild(line_break_in_heading);
/*End of: Create a headding which contains my question to forum users*/
/*Create an array to populate the first row of the table with the days of the week*/
var days_of_week_array = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
/*Call the function that generates an array of date strings to populate the second row of the interactive table we are creating at runtime.
There will be 7 date strings in the array - one for each day of the week.
These dates will also be used to search the table above for holidays which coincide with the work week.
Any holidays found for that work week will populate the third row of the table we are creating at runtime.
We are passing the Sunday of the last week of the year into the function because it contains two holidays*/
var v_datestring_array = generate_date_array_for_interactive_table(new Date(2015,11,27));
/*Call the function that creates an array of holidays from the table above which will be used to populate the third row of the interactive table we are creating at runtime.*/
var v_holiday_array = generate_holiday_array_for_interactive_table(v_datestring_array);
/*Now we are creating the table which will show where the holidays occur during the work week*/
var tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = "1px solid black";
for(var i = 0; i < 3; i++)
{
var tr = tbl.insertRow();
for(var j = 0; j < 7; j++)
{
var td = tr.insertCell();
td.style.border = "1px solid black";
if(i == 0) /*Populate the first row of the table with days of the week.*/
{
/*td.setAttribute('rowSpan', '2');*/
td.appendChild(document.createTextNode(days_of_week_array[j]));
}
else if(i == 1) /*Populate the second row of the table with dates.*/
{
td.appendChild(document.createTextNode(v_datestring_array[j]));
}
else if(i == 2) /*Populate the third row of the table with the names of any holidays which fall within the work week.*/
{
td.appendChild(document.createTextNode(v_holiday_array[j]));
td.style.backgroundColor = "green";
td.style.color = "white";
}
}
}
div_to_hold_week_table.appendChild(tbl);
} /*End of: function create_interactive_table() */
function generate_date_array_for_interactive_table(v_sunday_date)
{
var v_loop_date = v_sunday_date;
var v_loop_date_as_string ;
var v_loop_date_as_substring;
var v_internal_datestring_array = [];
for(var j = 0; j < 7; j++)
{
/*Turn the date into a string*/
v_loop_date_as_string = v_loop_date.toLocaleDateString()
/*Make the date strings identical to the format in the hoiday table above so they can be used for searching the table.
To accomplish this we just strip off a backslash and the year which is the last 5 characters.*/
v_loop_date_as_substring = v_loop_date_as_string.substr(0, v_loop_date_as_string.length -5);
/*Populate the array of datestrings to be returned.*/
v_internal_datestring_array[j] = v_loop_date_as_substring;
/*Increment the day by one*/
v_loop_date.setDate(v_loop_date.getDate() + 1);
}
/*Return an array of 7 dates. Each date represents a day in the employee's work week*/
/*This array will be returned to the calling function and used to create a table at run time which shows if any holidays occur during the work week.*/
return v_internal_datestring_array;
} /* End of: function generate_date_array_for_interactive_table(v_sunday_date)*/
function generate_holiday_array_for_interactive_table(dates_worked)
{
/* "dates_worked" is passed from the calling function. This information will eventually come from a punch clock*/
/*The following array will be populated with holiday names and dates from the holiday_table above*/
/*Holiday names will occupy the even numbered items and date strings will occupy the odd numbered items*/
var holiday_td_array = [];
/*The following array has one item for each day of the week. Each item will hold the name of a holiday if it falls on one of the days in the work week*/
/*This array will be returned to the calling function and used to create a table at run time containing enough information to calculate gross pay for the week.*/
var holiday_or_not_array = ["", "", "", "", "", "", ""];
/*Populate the holiday_td_array with information from the holiday_table*/
holiday_td_array = document.getElementById("holiday_table").querySelectorAll("td");
/*Compare the holidays against the work week to populate the holiday_or_not_array*/
for(var i = 0; i < 7; i++)
{
/*The variable j starts and 1 and increments by 2 because the odd numbered items contain the holiday date-strings. while even numbered items contain holiday names*/
for (var j = 1; j < holiday_td_array.length; j += 2)
{
if (dates_worked[i] == holiday_td_array[j].innerHTML)
{
/* j-1 because the holiday name is found in the array item preceeding it's corresponding datestring*/
holiday_or_not_array[i] = holiday_td_array[j - 1].innerHTML;
}
}
}
return holiday_or_not_array;
}
</script>
<div id="week_table_div">
<h2 id="week_heading_h2"></h2>
</div> <!-- week_table_div-->
<br>
<br>
<br>
</body>
</html>