06.05.2014, 23:39
|
|
Новичок на форуме
|
|
Регистрация: 06.05.2014
Сообщений: 7
|
|
|
Динамическое объединение столбцов таблицы
Здравствуйте. Имеется таблица с 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>
Последний раз редактировалось guest786, 06.05.2014 в 23:43.
|
|
07.05.2014, 01:40
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
guest786,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="javascript://" onclick="add();return false;">Добавить раздел</a><br>
<a href="javascript://" onclick="add2();return false;">Добавить тему и описание</a><br>
<table id="tableid" cellspacing="0" border="1">
<tbody>
</tbody>
</table>
<script>
function add()
{ var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.rowspan = 1;
td.innerHTML = "Раздел";
td.className = "item";
add2()
}
function add2()
{ var last = document.querySelectorAll('td.item'), len = last.length;
if(!len) return;
var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.innerHTML = "Тема";
td = tr.insertCell(1);
td.innerHTML = "Описание";
last[len-1].rowSpan+=1
}
</script>
</body>
</html>
Последний раз редактировалось рони, 07.05.2014 в 01:42.
|
|
07.05.2014, 10:24
|
|
Новичок на форуме
|
|
Регистрация: 06.05.2014
Сообщений: 7
|
|
|
рони, спасибо Вам огромное. А как сделать удаление тем и описаний и удаление разделов?
|
|
07.05.2014, 11:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
guest786,
помедитируйте тут почти схожая тема
Генерирование таблицы javascript там + добавить - добавляет - кнопку удалить
вам нужно определиться как вы будите определять раздел или тему которую нужно удалить -- сейчас код здесь 2 пост работает с последней строкой
|
|
12.05.2014, 20:17
|
|
Новичок на форуме
|
|
Регистрация: 06.05.2014
Сообщений: 7
|
|
|
Спасибо большое за ответ. А подскажите как добавить перед разделом 1 еще один столбец с номером столбца и чтобы у него тоже rowspan увеличивался а то я че то разобраться не могу. Использую вышеописанный код который Вы написали
|
|
12.05.2014, 21:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
guest786,
так?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="javascript://" onclick="add();return false;">Добавить раздел</a><br>
<a href="javascript://" onclick="add2();return false;">Добавить тему и описание</a><br>
<table id="tableid" cellspacing="0" border="1">
<tbody>
</tbody>
</table>
<script>
function add()
{ var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.rowspan = 1;
td.innerHTML = "Раздел";
td.className = "item";
td = tr.insertCell(0);
var item = document.querySelectorAll('td.item');
td.rowspan = 1;
td.innerHTML = item.length;
td.className = "number";
add2()
}
function add2()
{ var last = document.querySelectorAll('td.item'), len = last.length;
if(!len) return;
var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.innerHTML = "Тема";
td = tr.insertCell(1);
td.innerHTML = "Описание";
last[len-1].rowSpan+=1;
last = document.querySelectorAll('td.number'), len = last.length;
last[len-1].rowSpan+=1;
}
</script>
</body>
</html>
|
|
12.05.2014, 21:31
|
|
Новичок на форуме
|
|
Регистрация: 06.05.2014
Сообщений: 7
|
|
Сообщение от рони
|
guest786,
так?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="javascript://" onclick="add();return false;">Добавить раздел</a><br>
<a href="javascript://" onclick="add2();return false;">Добавить тему и описание</a><br>
<table id="tableid" cellspacing="0" border="1">
<tbody>
</tbody>
</table>
<script>
function add()
{ var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.rowspan = 1;
td.innerHTML = "Раздел";
td.className = "item";
td = tr.insertCell(0);
var item = document.querySelectorAll('td.item');
td.rowspan = 1;
td.innerHTML = item.length;
td.className = "number";
add2()
}
function add2()
{ var last = document.querySelectorAll('td.item'), len = last.length;
if(!len) return;
var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.innerHTML = "Тема";
td = tr.insertCell(1);
td.innerHTML = "Описание";
last[len-1].rowSpan+=1;
last = document.querySelectorAll('td.number'), len = last.length;
last[len-1].rowSpan+=1;
}
</script>
</body>
</html>
|
Огромнейшее Вам Спасибо за помощь 
|
|
19.05.2014, 23:03
|
|
Новичок на форуме
|
|
Регистрация: 06.05.2014
Сообщений: 7
|
|
Пытаюсь удалить тему и описание. Все удаляет но при добавлении нового раздела происходит смещение всего. не пойму почему. Подскажите пожалуйста что я делаю не так. Заранее спасибо за ответ
function add()
{
var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.rowspan = 1;
td.innerHTML = '<textarea name="razdel[]"></textarea>';
td.className = "item";
td = tr.insertCell(0);
var item = document.querySelectorAll('td.item');
td.rowspan = 1;
td.innerHTML ='<input type="text" value="'+item.length+'" size="3" readonly>';
td.className = "number";
add2()
}
function add2()
{
var last = document.querySelectorAll('td.item'), len = last.length;
if(!len) return;
var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.innerHTML = '<textarea name="theme[]"></textarea>';
td = tr.insertCell(1);
td.innerHTML = '<textarea name="desc[]"></textarea>';
td=tr.insertCell(2);
td.innerHTML='<input type="button" value="-" onclick="deleteRow(this);">';
last[len-1].rowSpan+=1;
last = document.querySelectorAll('td.number'), len = last.length;
last[len-1].rowSpan+=1;
}
function deleteRow(t)
{
var row = t.parentNode.parentNode;
document.getElementById("tableid").deleteRow(row.rowIndex);
var last = document.querySelectorAll('td.item'), len = last.length;
last[len-1].rowSpan-=1;
console.log(row);
}
|
|
20.05.2014, 00:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
guest786,
какое количество ячеек увеличили по высоте столько и уменьшайте
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<a href="javascript://" onclick="add();return false;">Добавить раздел</a><br>
<a href="javascript://" onclick="add2();return false;">Добавить тему и описание</a><br>
<table id="tableid" cellspacing="0" border="1">
<tbody>
</tbody>
</table>
<script>
function add()
{
var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.rowspan = 1;
td.innerHTML = '<textarea name="razdel[]"></textarea>';
td.className = "item";
td = tr.insertCell(0);
var item = document.querySelectorAll('td.item');
td.rowspan = 1;
td.innerHTML ='<input type="text" value="'+item.length+'" size="3" readonly>';
td.className = "number";
add2()
}
function add2()
{
var last = document.querySelectorAll('td.item'), len = last.length;
if(!len) return;
var table = document.querySelector('#tableid')
var tr = document.querySelectorAll('tr',table);
var tbody = document.querySelector('tbody',table);
var tr = tbody.insertRow(tr.length);
var td = tr.insertCell(0);
td.innerHTML = '<textarea name="theme[]"></textarea>';
td = tr.insertCell(1);
td.innerHTML = '<textarea name="desc[]"></textarea>';
td=tr.insertCell(2);
td.innerHTML='<input type="button" value="-" onclick="deleteRow(this);">';
last[len-1].rowSpan+=1;
last = document.querySelectorAll('td.number'), len = last.length;
last[len-1].rowSpan+=1;
}
function deleteRow(t)
{
var row = t.parentNode.parentNode;
i = row.rowIndex;
document.getElementById("tableid").deleteRow(i);
for (; row = document.getElementById("tableid").rows[--i];) {
if(row.querySelector('td.item')) {
row.querySelector('td.item').rowSpan -= 1;
row.querySelector('td.number').rowSpan -= 1;
break;
}
}
}
</script>
</body>
</html>
Последний раз редактировалось рони, 20.05.2014 в 01:23.
|
|
21.05.2014, 19:56
|
|
Новичок на форуме
|
|
Регистрация: 06.05.2014
Сообщений: 7
|
|
|
Спасибо Вам большое. Я наверно Вам уже надоел. А как сделать когда последняя строка остается в столбце "раздел" ничего не делать? а то он удаляет тему и описание а раздел оставляет. И последний вопрос как реализовать удаление всего раздела в независимости от того сколько там тем. т.е одной кнопкой определенный раздел. Заранее спасибо Вам за помощь
|
|
|
|
