Добавление строки в таблицу
Всем привет. Не силён в 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 Помогите побороть это недоразумение. Заранее спасибо. |
Таблицу в span уже плохо. Рег. выражения тут лишнее. Стили из тегов убрать. Не надо ни каких номеров полям, индексы будет проставлены автоматически согласно порядку полей в форме. На jQuery:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#tbl {
border-collapse: collapse;
}
#tbl td {
border: 1px solid #ddd;
padding: 4px;
}
#tbl input {
width: 50px;
}
a.delRow, #addRow {
display: block;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$('#addRow').click(function() {
var t = $('#tbl');
t.find('tr')
.eq(1)
.clone()
.appendTo(t)
.find('td:last')
.append('<a class="delRow">удалить</a>')
.end()
.find('input')
.val('');
});
$('#tbl').on('click', 'a.delRow', function() {
$(this).closest('tr').remove();
});
});
</script>
</head>
<body>
<form>
<table id="tbl">
<tr>
<td>Поле раз</td>
<td>Поле два</td>
<td>Поле три</td>
<td><a id="addRow">+</a></td>
</tr>
<tr>
<td><input type="text" name="field1[]" /></td>
<td><input type="text" name="field2[]" /></td>
<td><input type="text" name="field3[]" /></td>
<td></td>
</tr>
</table>
<input type="submit"/>
</form>
</body>
</html>
|
Цитата:
|
laimas, огромное спасибо за код.
В приведенном примере поля input были для примера, в реальности использую так же textarea. Изменил чутка скрипт:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$('#addRow').click(function() {
var t = $('#tbl');
t.find('tr')
.eq(1)
.clone()
.appendTo(t)
.find('td:last')
.append('<a class="delRow">удалить</a>')
.end()
.find('textarea')
.val('')
.end()
.find('input')
.val('');
});
$('#tbl').on('click', 'a.delRow', function() {
$(this).closest('tr').remove();
});
});
</script>
Всё работает великолепно. Ещё раз огромное спасибо. 2 warren buffet Изначальная ЗАДАЧА была в создании динамической формы ибо количество полей неизвестно. Реализацию ЗАДАЧИ нашёл в интернете, но возникли сложности описанные в первом посте. Потому потребовалась помощь в реализации изменений в готовой реализации изначально поставленной задачи. Что, само по себе, и является задачей. Не? :) |
visajack,
таблица все таки для табличных данных, а форматировать элементы в форме можно более легкими средствами. Ищите в сети, там много пример по данному вопросу. |
visajack, нет таких динамических форм. Твоя задача называется
datagrid а форма не нужна, поскольку ты все равно используешь жабу скрипучую. В datagrid поля не размножаются, а просто подставляются в строку, куда юзер щелкнул. Ладно, не важно, посмотри как делают по словам datagrid javascript в гугле. |
Цитата:
Datagrid - элемент управления. Управлять можно любыми табличными данными. Если хочешь по 100500 раз не переписывать свою бнопню, колись, что делаешь и может быть оно в 100500-й раз уже сделано и надо просто пойти, скачать и себе приклеить. |
| Часовой пояс GMT +3, время: 03:31. |