Javascript - добавление полей в форму с сохранением введенных данных

[Holger Dee Assuran]

Доброго времени суток всем.
Есть у меня одна задачка - форма изначально содержит три текстовых поля в одну строку и ссылку "еще". При клике на "еще" нужно добавить еще одну строку с тремя полями и ссылкой "убрать". При клике на "убрать" в одной из строк эта строка должна быть убрана. Всего строк - неограниченное количество. В общем решение я нашел - довольно распространенное в сети:

<script>
function addLine()
{
c=++document.getElementById('count').value; // увеличиваем счётчик строк
s=document.getElementById('friends').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('friends').innerHTML=s;
// возвращаем результат на место исходной таблицы
return false; // чтобы не происходил переход по ссылке
}

function rmLine(q)
{
if (q!=0){
s=document.getElementById('friends').innerHTML;
s=s.replace(/[\r\n]/g,'');
re=new RegExp('<tr id="?newLine"? item="?\\['+q+'.*?<\\/tr>','gi');
// это регулярное выражение позволяет выделить строку таблицы с заданным номером
s=s.replace(re,'');
// заменяем её на пустое место
document.getElementById('friends').innerHTML=s;
}
return false;
}
</script>

<form action='#' method='post'>
<span id='friends'>
<table border=1 width='100%'>
<tr><th>ФИО</th><th>E-mail</th><th>Город</th><th><a href='#' onclick='return addLine();'>еще</a></th></tr>
<tr id='newLine' item='[0]'>
<td><input type='text' name='fr_fio[0]'></td>
<td><input type='text' name='fr_email[0]'></td>
<td><input type='text' name='fr_city[0]'></td>
<td><a href='#' onclick='return rmLine(0);'>удалить</a></td>
</tr>
</table>
<input type='hidden' name='count' id='count' value='0'>
</span>
</form>

И все вроде хорошо, но есть одно НО - при добавлении или удалении строк, данные введенные в поля формы пропадают, а нужно что-бы оставались. Подскажите как это сделать?

 

[Vovochka]

При удаленнии N'ого поля занасоить его значене в массив, при восстановлении поля, вернуть ему значение.
Нуэто как один из возможных вариантов.

 

[Holger Dee Assuran]

Видимо я не совсем точно сформулировал. При добавлении новой строки с полями и при удалении одной из строк, в решении которое я нашел, перерисовывается вся таблица, при этом все уже введенные в форму данные пропадают.
Скорее так - при создании новой строки с полями собирать значения уже заполненных в массив(ы). При перерисовке таблицы с полями подставить значения. При удалении строки полей - то же самое, собрать значения заполненных полей и подставить их при перерисовке таблицы.
Я честно говоря не силен в JavaScript - подскажешь как это делается?

 

[Holger Dee Assuran]

Решение найдено. Нет возможности выбрать какую именно строку удаляем (всегда удаляем последнюю), зато работает как надо - сохраняя введенные данные. Разница в подходе - в первом листинге я перерисовывал всю таблицу с полями формы заново и, естественно, "терял" введенные данные.
В этом листинге я посредством DOM дополняю таблицу новым элементом TBODY и пишу в него HTML-код новой строки с полями формы. При удалении я проверяю не удаляю ли я TBODY исходной таблицы и просто убиваю последний из них.

<script>
var count=0;	// Счетчик элементов TBODY
// Вставка новых строк в форму
function addLine() {
count++;	// Увеличиваем количество TBODY
var table=document.getElementById('friends');	// Получаем указатель нужной нам таблицы
var tbody = document.createElement('tbody');	// Создаем новый TBODY
table.appendChild(tbody);	// Вставляем его в конец таблицы
// Пишем в него все что нам нужно
tbody.innerHTML="\n\n<tr id='"+count+"'>\n<td><input type='text' name='fr_fio["+count+"]'></td>\n"
+"<td><input type='text' name='fr_email["+count+"]'></td>\n"
+"<td>\n<select name='fr_city["+count+"]'>\n"
+"<option value='1'>Москва</option>\n<option value='2'>Немосква</option>\n"
// строку выше заменить на реальный список городов
+"</select>\n</td>\n</tr>\n\n";
return false;
}
// Удаление последней строки
function rmLine()
{
if (count!=0){	// Удаляем любую строку кроме первой
var table=document.getElementById('friends');	// Получаем указатель нужной нам таблицы
var tbody = table.lastChild;	// Выбираем последний дочерний элемент таблицы (вставленный нами TBODY)
table.removeChild(tbody);	// Убиваем его
count--;	// Уменьшаем счетчик элементов TBODY
}
return false;
}
</script>

<a class='friendsForm' href='#' onclick='return addLine();'>добавить</a>
<a class='friendsForm' href='#' onclick='return rmLine();'>убрать</a>
<table id='friends' border='1'>
<tbody>
<tr><td>ФИО</td><td>e-mail</td><td>город</td></tr>
<tr id='0'>
<td><input type='text' name='fr_fio[0]'></td>
<td><input type='text' name='fr_email[0]'></td>
<td>
<select name='fr_city[0]'>
<option value='1'>Москва</option>
<option value='2'>Немосква</option>
</select>
</td>
</tr>
</tbody>
</table>