Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Динамическое добавление ещё одного ряда TextBox'ов. (https://javascript.ru/forum/dom-window/12104-dinamicheskoe-dobavlenie-eshhjo-odnogo-ryada-textbox%27ov.html)

sergeos 30.09.2010 18:36

Динамическое добавление ещё одного ряда TextBox'ов.
 
Народ, а скажите пожалуйста, как делается такая вещь, допустим у меня на странице есть строка из двух текстбоксов:
txtName0, txtAge0
и требуется добавить динамически ещё ряд текстбоксов. К примеру, получится ещё:
txtName1, txtAge1

Как потом можно определить, сколько рядов с текстбоксами было добавлено, и главное, как с них поснимать значения?

Sweet 30.09.2010 18:56

A TextBox - это что такое?

sergeos 30.09.2010 19:51

хмм, :)
это я упустил. это input

Sweet 30.09.2010 20:30

В вопросе уже половина решения. В чем проблема-то? Совсем ничего не знаешь что ли?
<div>
  Имя: <input type="text" id="txtName0">
  Возраст: <input type="text" id="txtAge0"><br>
</div>
<br>
<input type="button" value="Добавить поля" onclick="add();">
<script>
function add(){
  var text = add.part1+add.count+add.part2+add.count+add.part3
  add.div.innerHTML += text
  add.count++
}
add.count = 1
add.div = document.getElementsByTagName('div')[0]
add.part1 = 'Имя: <input type="text" id="txtName'
add.part2 = '"> Возраст: <input type="text" id="txtAge'
add.part3 = '"><br>'
</script>

sergeos 05.10.2010 20:14

Sweet,
Большущее спасибо!
Возникла небольшая проблема, мой див находится в таблице:
<table>
   <tr>
      <td>
       <div>  
            Имя: <input type="text" id="txtName0">  
            Возраст: <input type="text" id="txtAge0"><br>  
       </div>  
       <br>  
       <input type="button" value="Добавить поля" onclick="add();"> 
       </td>
   </tr>
</table>


и если я нажимаю кнопку Добавить поля, то поля добавляются над таблицей. Как их можно направить в нужную ячейку таблицы? И как определить значение в добавленном текстбоксе? Смотрю код страницы, там элементы не описаны. Хотя на странице же они добавились.

HelpeR 05.10.2010 20:36

<table id="tbl">
<tr>
<td><div>Имя: <input  type="text" id="txtName0">Возраст: <input type="text" id="txtAge0"></div></td>
</tr>
</table>

var count = 0;
function add() {
    count++;
    var table = document.getElementById('tbl');
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    td.innerHTML = "<div>Имя: <input  type='text' id='txtName" + count + "'>Возраст: <input type='text' id='txtAge'" + count + "'></div>";
    tr.appendChild(td);
    table.appendChild(tr);
}

<input type="button" value="Добавить поля" onclick="add();">


Часовой пояс GMT +3, время: 21:45.