[sonntagausgang]

Все привет. Сижу разбираюсь с таблицами. Не подскажите как сделать.
У меня есть таблицы на html такого вида.

<tr>
		<td>День</td>
		<td>№</td>
		<td>Начало</td>
		<td>Подгруп</td>
	</tr>
	<tr>
		<td rowspan="5">Понедельник</td>
		<td>1</td>
		<td>9:00</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>2</td>
		<td>10:45</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>3</td>
		<td>13:10</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>4</td>
		<td>14:55</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>5</td>
		<td>16:20</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>

Необходимо чтобы при клике на span с class="addSub" (на плюсик) добавлялась новая строка под ней. То есть у понедельника раньше был rowspan 5 а должен стать шесть и так далее. И столбы, которые справа должны изменять rowspan. Ну то есть должна появиться таблица следующего вида:

<tr>
		<td>День</td>
		<td>№</td>
		<td>Начало</td>
		<td>Подгруп</td>
	</tr>
	<tr>
		<td rowspan="6">Понедельник</td>
		<td rowspan="2">1</td>
		<td rowspan="2">9:00</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>
	<tr><td style="display:none;"></td><td style="display:none;"></td><td><span class="deleteSub">[-]</span></td></tr><tr>
		<td class="hiddenTd"></td>
		<td>2</td>
		<td>10:45</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>3</td>
		<td>13:10</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>4</td>
		<td>14:55</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>5</td>
		<td>16:20</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
            <span class="deleteSub" style="display: none;">[-]</span>
        </td>
	</tr>

Потестировать можно здесь http://sonntag.besaba.com/index2.html

Если один раз нажать на плюсик в каждой строке то все идет нормально. Если кликнуть еще раз там то косячит. Я так и так мучился ничего не получилось. Просто поставил два в строчках 42 и 43 объединение двух строк. А как автоматизировать чтобы можно кликать до бесконечности и столбцы объединялись.

var table = document.getElementById('table');

var counter = 5;
var counter7 = 5;
// var counter3 = 5;
// var counter4 = 5;
// var counter5 = 5;
// var counter6 = 5;

var linecount = 1;
var linecount2 = 6;
var linecount3 = 11;
// var linecount4 = 16;
// var linecount5 = 21;
// var linecount6 = 0;

table.onclick = function(e) {
  var event = e || window.event;
  var target = event.target || event.srcElement;
  if (target.className != 'addSub') return;
  	var t_value = target.parentNode.parentNode.rowIndex;
  	var row = table.insertRow(t_value+1);
  	var cell = row.insertCell(0).setAttribute('style','display:none;');
    var cell = row.insertCell(1).setAttribute('style','display:none;');
    var cell = row.insertCell(2);

  	cell.innerHTML = "<span class='deleteSub'>[-]</span>";

    if (t_value < linecount2 && t_value >= linecount) {
        counter++;
        table.rows[1].cells[0].setAttribute('rowspan', counter);
        linecount2++; 
        linecount3++;
    }
    else if (t_value < linecount3 && t_value >= linecount2) {
        counter7++;
        table.rows[linecount2].cells[0].setAttribute('rowspan', counter7);
        linecount3++;

    }

  	table.rows[t_value].cells[1].setAttribute('rowspan', 2);
  	table.rows[t_value].cells[2].setAttribute('rowspan', 2);
    
  return false;
}