→ При разработке сайта лендинг в подарок! ЖМИ! ←
Июл
19

Динамическое добавление строк

http://nowyny.com/news/2014-01-07

Было нужно сделать добавление строк с инпутами. Писать с нуля незачем, наверняка разработки есть. Полез в сеть в поисках. Довольно быстро набрел на наполовину рабочий скрипт.
К сожалению, потерял автора 🙁 Автор, найдись!
После моих дополнений скрипт приобрел такой вид:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<head>
<script language=JavaScript>
var numb;
numb = 1;
function add_new_row() {
var currrow;
currow = document.all.tbl.rows.length; // вычислить количество строк в таблице
numb++;
document.all.tbl.insertRow(currow); // добавляем строку в таблицу
document.all.tbl.rows[currow].insertCell(0); // добавляем ячейки
document.all.tbl.rows[currow].insertCell(1);
document.all.tbl.rows[currow].insertCell(2);
document.all.tbl.rows[currow].insertCell(3);
document.all.tbl.rows[currow].insertCell(4);
document.all.tbl.rows[currow].cells[0].innerHTML = '<input type=\"text\" name=\"name_'+ numb +'\">'; // вставляем в форму поля
document.all.tbl.rows[currow].cells[1].innerHTML = '<input type=\"text\" name=\"url_'+ numb+'\">';
document.all.tbl.rows[currow].cells[2].innerHTML = '<input type=\"text\" name=\"category_'+ numb+'\">';
document.all.tbl.rows[currow].cells[3].innerHTML = '<input type=button name=\"btnNext\" value=\"+\" onClick=\"add_new_row()\">'; // кнопка для вызова функции для добавления следующей строки
document.all.tbl.rows[currow].cells[4].innerHTML = '<input type=button name=\"btnPrev\" value=\" - \" onClick=\"remove_current_row(currow)\">'; // кнопка для вызова функции для удаления текущей строки
} function remove_current_row() {
var currrow;
currow = document.all.tbl.rows.length; // вычислить количество строк в таблице
if (document.all.tbl.rows.length>2){
document.all.tbl.deleteRow(1)
}
}
</script>
</head>
<body>
<form name=links method=post>
<table id=tbl cellspacing=0 cellpadding=0 border=1>
<tbody>
<tr bgcolor=#ff9933>
<td>Наименование</td>
<td>Адрес</td>
<td colspan=2>Категория</td>
</tr>
<tr>
<td>
<input name=name_1 width="60">
</td>
<td>
<input name=URL_1 width="60">
</td>
<td>
<input name=category_1 width="30">
</td>
<td>
<input onClick=add_new_row() type=button value=+ name=btnNext>
</td>
<td>
<input onClick=remove

можно скачать файл с исходником и проверить работу. Работает во всех браузерах.

Прокомментировать

Рубрики

Наши услуги

В прямом эфире