Здравствуйте. Имеется таблица с 3 столбцами. Нужно организовать динамическую таблицу как показано на рисунке. На форме будет 2 кнопки: 1. Добавить Раздел. 2. Добавить тему и описание.
у меня есть некоторые наработки на javascript но это немного не так работает.Мне нужно чтобы при нажатии кнопки добавить раздел добавлялась строка с rowspan=1 где первый столбец имя раздела второй столбец тема и третий столбец описание, а при нажатии кнопки добавить тему rowspan первого столбца(раздел) увеличивался на 1 и добавлялись остальные столбцы. Подскажите в чем ошибка и как ее исправить. Заранее спасибо за помощь
function addRow(){
var tbody = document.getElementById("tableid").getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("column 1"))
var td2 = document.createElement("TD")
td2.appendChild (document.createTextNode("column 2"))
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
td = document.getElementById("td_id");
td.rowSpan+=1;
}
function addRow2(){
var tbody = document.getElementById("tableid").getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.id="td_id2";
td1.appendChild(document.createTextNode("row1"))
var td2 = document.createElement("TD")
td2.appendChild (document.createTextNode("row2"))
var td3 = document.createElement("TD")
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
td = document.getElementById("td_id2");
td.rowSpan+=1;
}
<a href="javascript://" onclick="addRow()";return false;">Добавить раздел</a><a href="javascript://" onclick="addRow2 ()";return false;">Добавить тему и описание</a>
<table id="tableid" cellspacing="0" border="1">
<tbody>
<tr>
<td id="td_id">row1_column1</td><td>row2_column2</td><td>row3_column3</td>
</tr>
</tbody>
</table>