Вход

Просмотр полной версии : При клике на кнопу добавлять поля с нужным id, class


dima_riabets
05.01.2015, 22:05
Есть кнопка:
<input type="button" value="+ Input">

Если кликнуть на эту кнопку в таблице с id="dp" добавляется 2 поля:
<input id="qqqh1" placeholder="H1" class="input_other_add_item">
<input id="qqqx1" placeholder="X1" class="input_other_add_item">

Если кликнуть на кнопку еще раз:
<input id="qqqh1" placeholder="H1" class="input_other_add_item">
<input id="qqqx1" placeholder="X1" class="input_other_add_item">
<input id="qqqh2" placeholder="H2" class="input_other_add_item">
<input id="qqqx2" placeholder="X2" class="input_other_add_item">

Кликать кнопку можно много раз добавляя каждый раз при этом поля вида:
<input id="qqqh + i" placeholder="H + i" class="input_other_add_item">
<input id="qqqx + i" placeholder="X + i" class="input_other_add_item">

krutoy
05.01.2015, 22:30
<html>
<head>
</head>
<body>

<input type="button" value="+ Input">

<table id="dp">
</table>


<script>

c=0
table=document.querySelector("#dp")
document.querySelector("input").onclick=function(){
var el=document.createElement("tr")
c++
el.innerHTML='<td><input id="qqqh'+c+'" placeholder="H'+c+'" class="input_other_add_item"></td><td> <input id="qqqx'+c+'" placeholder="X'+c+'" class="input_other_add_item"></td>'
table.appendChild(el)
}


</script>

</body>
</html>

dima_riabets
05.01.2015, 22:47
Спасибо большое!!! :thanks:

dima_riabets
05.01.2015, 22:47
Тему можно закрыть!) :yes:

ruslan_mart
06.01.2015, 18:12
krutoy, открой для себя методы для работы с таблицами (http://php-zametki.ru/javascript-laboratoriya/80-javascript-dinamicheskaya-tablica.html), тут не нужно никаких createElement('tr'). И вообще, таблица - прошлый век.

И опять пропагандируешь написание переменных без var.

krutoy
06.01.2015, 18:20
Ruslan_xDD,

GLOB - глобальный контекст (объект window или this)

Это ты что ли писал? Побольше читай таких авторов, я рад за тебя.