[Aetae]

Потому что после вставки innerHTML браузер парсит результат,(потому как код, что логично, считается завершённым, откуда ему знать что Вася в следующей строчке или через десять колбэков снова использует innerHTML) и пытается из того говна что вы туда запихнули сотворить валидный dom.
Это не говоря о том что "foo += bar" - это на самом деле "foo = foo + bar", и, соответственно, каждый раз делая "el.innerHTML+=str" вы перезаписываете всё заново.
Это самые-самые базовые знания.

var table = document.createElement('table'); 
// Создаём таблицу, всё ок: <table></table>
console.log(1, table.outerHTML) // <table></table>

table.innerHTML = '<tbody><tr>';    
// Браузер видит: "<table>*!*<tbody><tr>*/!*</table>", думает "Хуйня какая-то, наверное надо закрыть теги..." и в итоге:
console.log(2, table.outerHTML) // <table><tbody><tr>*!*</tr></tbody>*/!*</table>

table.innerHTML += '<td></td>';     
// Браузер видит: "<table><tbody><tr></tr></tbody>*!*<td></td>*/!*</table>", думает "Что за гавно?! Наверное он имел ввиду" :
console.log(3, table.outerHTML) // <table><tbody><tr></tr></tbody>*!*<tbody><tr><td></td></tr></tbody>*/!*</table>

table.innerHTML += '</tr></tbody>'; 
// Браузер видит: "<table><tbody><tr></tr></tbody><tbody><tr><td></td></tr></tbody>*!*</tr></tbody>*/!*</table>", думает:
// "Ну пиздец, хз что он имел ввиду." и игнорирует:
console.log(4, table.outerHTML) // <table><tbody><tr></tr></tbody><tbody><tr><td></td></tr></tbody></table>

P.S. В ie<9 таблицам вообще нельзя innerHTML если что.
У вас есть целых два способа создавать таблицы по-человечески:

var table = document.createElement('table'),
    tr = table.appendChild(document.createElement('tbody'))
              .appendChild(document.createElement('tr'));
for (i = 1; i < lastDate; i++) {
    tr.appendChild(document.createElement('td'));
}

var table = document.createElement('table'),
    tr = table.insertRow();
for (i = 1; i < lastDate; i++) {
    tr.insertCell();
}

но нет же...