Javascript-форум - Динамическое объединение столбцов таблицы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Динамическое объединение столбцов таблицы (https://javascript.ru/forum/dom-window/47062-dinamicheskoe-obedinenie-stolbcov-tablicy.html)

guest786

06.05.2014 23:39

Динамическое объединение столбцов таблицы

Здравствуйте. Имеется таблица с 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>

рони	07.05.2014 01:40

guest786,
:write:

<!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>

guest786

07.05.2014 10:24

рони, спасибо Вам огромное. А как сделать удаление тем и описаний и удаление разделов?

рони	07.05.2014 11:24

guest786,
помедитируйте тут почти схожая тема
http://javascript.ru/forum/misc/4512...tml#post297833 там + добавить - добавляет - кнопку удалить
вам нужно определиться как вы будите определять раздел или тему которую нужно удалить -- сейчас код здесь 2 пост работает с последней строкой

guest786

12.05.2014 20:17

Спасибо большое за ответ. А подскажите как добавить перед разделом 1 еще один столбец с номером столбца и чтобы у него тоже rowspan увеличивался а то я че то разобраться не могу. Использую вышеописанный код который Вы написали

рони	12.05.2014 21:25

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>

guest786

12.05.2014 21:31

Цитата:

Сообщение от рони (Сообщение 311565)

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>

Огромнейшее Вам Спасибо за помощь:)

guest786

19.05.2014 23:03

Пытаюсь удалить тему и описание. Все удаляет но при добавлении нового раздела происходит смещение всего. не пойму почему. Подскажите пожалуйста что я делаю не так. Заранее спасибо за ответ

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

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>

guest786

21.05.2014 19:56

Спасибо Вам большое. Я наверно Вам уже надоел. А как сделать когда последняя строка остается в столбце "раздел" ничего не делать? а то он удаляет тему и описание а раздел оставляет. И последний вопрос как реализовать удаление всего раздела в независимости от того сколько там тем. т.е одной кнопкой определенный раздел. Заранее спасибо Вам за помощь

рони	21.05.2014 20:37

Цитата:

Сообщение от guest786

А как сделать когда последняя строка остается в столбце "раздел" ничего не делать?

наверно что-то проверить в строке 58.5 и если оно равно 2 то сделать return

Цитата:

Сообщение от guest786

вопрос как реализовать удаление всего раздела в независимости от того сколько там тем. т.е одной кнопкой определенный раздел.

наверно проверить кое-что у раздела и удалить столько-же строк следующих включая раздел

guest786

21.05.2014 21:01

Цитата:

Сообщение от рони (Сообщение 312793)

наверно что-то проверить в строке 58.5 и если оно равно 2 то сделать return

if(i==2) return;

я проверил в первом разделе все прекрасно а в остальных та же фигня. Если я вас правильно понял то проверка должна быть такая?

рони	21.05.2014 21:12

Цитата:

Сообщение от guest786

проверка должна быть такая?

нет - обе проверки указанные выше проверяют одно и тоже

рони	21.05.2014 21:37

guest786,
если что-то ещё то плюшки в личку :write:
жать на циферку удалится раздел -- нажатие на минус сработает на всех строках раздела кроме последней.

<!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="button" value="'+item.length+'" size="3" readonly onclick="deleteRow(this);">';
				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;
      var i = row.rowIndex;
      if(row.querySelector('td.item')){
          var qt = row.querySelector('td.item').rowSpan;
          for (var k=0; k<qt; k++)  {
             document.getElementById("tableid").deleteRow(i);
          }
          var number = document.querySelectorAll('td.number');
          for (var i=0; i<number.length; )  {
                number[i].innerHTML ='<input type="button" value="'+(++i)+'" size="3" readonly onclick="deleteRow(this);">';//если востановление нумерации ненужно убрать
          }
          return;
      }

      if(row.previousSibling.cells[0].rowSpan == 2) return;
 	  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>

Часовой пояс GMT +3, время: 21:05.