Как говорит Рави, значения месяца лучше быть номером месяца, а не числом дней в месяце.Кроме того, если вы собираетесь использовать несколько кнопок отправки, лучше поместить элементы управления в форму и дать кнопкам имя, чтобы вы могли определить, какая из них была нажата.
Я бы использовал tbody длястроки, чтобы вам не приходилось каждый раз заново генерировать заголовок.Вы даже можете установить количество ячеек в новых строках равным количеству ячеек в строке заголовка, чтобы можно было регулировать количество ячеек без необходимости настройки функции.Вы также можете поместить класс в ячейку заголовка даты, чтобы вы знали, в какой столбец нужно поместить дату.
Я использовал thead для строки заголовка, но вы можете просто использовать другой tbody (таблица можетимеют несколько тел).
Например
// Helper to format a date as DD/MM/YYYY
function formatDate(d) {
var z = x => ('0'+x).slice(-2);
return z(d.getDate()) + '/' + z(d.getMonth()+1) + '/' + d.getFullYear();
}
function getMonth(month) {
// Get the monData tbody and clear the rows
var tbody = document.getElementById('monData');
while (tbody.rows.length) {
tbody.removeChild(tbody.firstChild);
}
// Get the header row, number of cells and date cell index
// The default date cell is 0 (the first one)
var headRow = tbody.parentNode.rows[0];
var cellCount = headRow.cells.length;
var dateIndex = headRow.querySelector('.dateCell').cellIndex || 0;
// If selected first option, stop here
if (month == 0) return;
// Create a date for the start of the selected month in the current year
var date = new Date();
month -= 1;
date.setMonth(month, 1);
// Create a document fragment with the required tr and tds
var frag = document.createDocumentFragment();
var oRow = frag.appendChild(document.createElement('tr'));
for (var i=0; i<cellCount; i++) {
oRow.appendChild(document.createElement('td'));
}
// Clone the row once for each day of the month, putting a
// formatted date in the first cell
while (date.getMonth() == month) {
var row = oRow.cloneNode(true);
row.cells[dateIndex].textContent = formatDate(date);
frag.appendChild(row);
date.setDate(date.getDate()+1);
}
// Append the fragment of rows to the tbody
tbody.appendChild(frag);
}
table {
border-left: 1px solid #dddddd;
border-top : 1px solid #dddddd;
border-collapse: collapse;
}
th, td {
border-right: 1px solid #dddddd;
border-bottom : 1px solid #dddddd;
width: 6em;
}
<form>
<div align="right">
<input type="submit" value="Sign In" name="signIn">
<input type="submit" value="Sign Out" name="signOut">
</div>
Month:<select name="month" id="month" onchange="getMonth(this.value)">
<option value="0">Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</form>
<table>
<head>
<tr><th class="dateCell">Date</th><th>Sign In</th><th>Sign Out</th><th>Total Hours</th></tr>
</head>
<tbody id="monData">
</tbody>
</table>