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