июля
19
0

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

Author K_E_V_in    Category javascript     Tags , , , , , , , , , ,

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

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
53
54
55
56
57
58
59
60
<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_current_row() type=button value=" - " name=btnPrev>
</td>
</tr>
</tbody>
</table>
<input type=submit value=Submit name="submit">
<input type=reset value=Сброс name="reset">
</form>
<!--formatted-->

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

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

Рубрики

Облако меток

На волнах твиттера

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