Генерирование таблицы javascript
 

Все привет. Сижу разбираюсь с таблицами. Не подскажите как сделать.
У меня есть таблицы на 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;
}

sonntagausgang,
Вариант...:write:

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://sonntag.besaba.com/style.css">
   <script>
    document.onclick = function (e) {
        var target = e && e.target || event.srcElement;
        if (target.className == "addSub") {
            var parent = target.parentNode.parentNode;
            indx = parent.rowIndex,
            tds = parent.querySelectorAll('td');
            for (var i = 1; i < tds.length - 1; i++) {
                tds[i].rowSpan = ++tds[i].rowSpan
            }
            var tbody = parent.parentNode;
            var tr = tbody.insertRow(++indx);
            var td = tr.insertCell(0);
            td.colSpan = "4";
            td.innerHTML = "<span class='deleteSub'>[-]</span>";
            while (--indx) {
                td = tbody.rows[indx].cells[0]
                if (td.className == "day") break;
            }
            td.rowSpan = ++td.rowSpan
        };
        if (target.className == "deleteSub") {
            var parent = target.parentNode.parentNode;
            indx = parent.rowIndex;
            var tbody = parent.parentNode;
            var tr = tbody.deleteRow(indx);
            var flag = true;
            while (indx) {
                tr = tbody.rows[--indx];
                if (tr.cells[0].className == "hiddenTd" && flag) {
                    flag = false;
                    tr.cells[1].rowSpan = --tr.cells[1].rowSpan
                    tr.cells[2].rowSpan = --tr.cells[2].rowSpan
                };

                if (tr.cells[0].className == "day") break;
            }
            tr.cells[0].rowSpan = --tr.cells[0].rowSpan
        };
    }
</script>
</head>

<body>
 <table border="1" id="table"><tr>
		<td>День</td>
		<td>№</td>
		<td>Начало</td>
		<td>Подгруп</td>
	</tr>
	<tr>
		<td rowspan="6" class="day">Понедельник</td>
	</tr>
    <tr>
		<td class="hiddenTd"></td>
		<td >1</td>
		<td >9:00</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>

	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>2</td>
		<td>10:45</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>3</td>
		<td>13:10</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>4</td>
		<td>14:55</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>5</td>
		<td>16:20</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>
	</tr>
	<tr>
		<td rowspan="6" class="day">Вторник</td>
	</tr>
    <tr>
		<td class="hiddenTd"></td>
		<td >1</td>
		<td >9:00</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>

	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>2</td>
		<td>10:45</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>3</td>
		<td>13:10</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>4</td>
		<td>14:55</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>
	</tr>
	<tr>
		<td class="hiddenTd"></td>
		<td>5</td>
		<td>16:20</td>
		<td>
			<span class="addSub" style="display: inline;">[+]</span>
        </td>
	</tr>
 </table>
</body>

</html>