Показать сообщение отдельно
  #1 (permalink)  
Старый 24.09.2016, 12:45
Новичок на форуме
Отправить личное сообщение для visajack Посмотреть профиль Найти все сообщения от visajack
 
Регистрация: 24.09.2016
Сообщений: 2

Добавление строки в таблицу
Всем привет. Не силён в js, потому для реализации своей задачи (добавление строки в таблицу) надыбал на просторах интернета следующий скрипт:
<script>
var c=0; //счётчик количества строк
function addline()
{
	c++; // увеличиваем счётчик строк
	s=document.getElementById('table').innerHTML; // получаем HTML-код таблицы
	s=s.replace(/[\r\n]/g,''); // вырезаем все символы перевода строк
	re=/(.*)(<tr id=.*>)(<\/table>)/gi; 
                // это регулярное выражение позволяет выделить последнюю строку таблицы
	s1=s.replace(re,'$2'); // получаем HTML-код последней строки таблицы
	s2=s1.replace(/\[\d+\]/gi,'['+c+']'); // заменяем все цифры к квадратных скобках
                // на номер новой строки
	s2=s2.replace(/(rmline\()(\d+\))/gi,'$1'+c+')');
                // заменяем аргумент функции rmline на номер новой строки
	s=s.replace(re,'$1$2'+s2+'$3');
                // создаём HTML-код с добавленным кодом новой строки
	document.getElementById('table').innerHTML=s;
                // возвращаем результат на место исходной таблицы
	return false; // чтобы не происходил переход по ссылке
}
function rmline(q)
{
                 if (c==0) return false; else c--;
                // если раскомментировать предыдущую строчку, то последний (единственный) 
                // элемент удалить будет нельзя.
	s=document.getElementById('table').innerHTML;
	s=s.replace(/[\r\n]/g,'');
	re=new RegExp('<tr id="?newline"? nomer="?\\['+q+'.*?<\\/tr>','gi');
                // это регулярное выражение позволяет выделить строку таблицы с заданным номером
	s=s.replace(re,'');
                // заменяем её на пустое место
	document.getElementById('table').innerHTML=s;
	return false;
}
</script>

Сама форма:
<form>
	<span id="table">
		<table border=1 cellspacing=0 cellpadding=3>
			<tr>
				<td>Поле раз</td>
				<td>Поле два</td>
				<td>Поле три</td>
				<td><a href="#" onclick="return addline();"><span style="color:red; font-size:36px; text-align:center;">+</span></a></td>
			</tr>
			<tr id="newline" nomer="[0]">
				<td><input type="text" name="field1[0]" style="width: 50px;"></td>
				<td><input type="text" name="field2[0]" style="width: 50px;"></td>
				<td><input type="text" name="field3[0]" style="width: 50px;"></td>
				<td valign="top"><a href="#" onclick="return rmline(0);">удалить</a></td>
			</tr>
		</table>
	</span>
	<input type="submit">
</form>

Все работает, строки добавляются по нажатию "+", но с одним неприятным деффектом - стираются уже заполненные поля.
Т.е. нажав "+" в данной форме: http://prntscr.com/clqopm
Получу следующее: http://prntscr.com/clqovj
Помогите побороть это недоразумение.
Заранее спасибо.

Последний раз редактировалось visajack, 24.09.2016 в 12:54.
Ответить с цитированием