Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > динамическое добавление полей


Автор: Avtor 21.8.2006, 14:38
Код

<html>
<head>
<title>Динамическое добавление группы полей по желанию пользователя</title>
<script language="JavaScript">
var items=1;
function AddItem() {
  div=document.getElementById("items");
  button=document.getElementById("add");
  items++;
  newitem="<strong>Предмет </strong>";
  newitem+="<input type=\"text\" name=\"qty" + items;
  newitem+="\" size=\"10\"> ";
  newitem+="<strong>Описание </strong>";
  newitem+="<input type=\"text\" name=\"item" + items;
  newitem+="\" size=\"35\"><br>";
  newnode=document.createElement("span");
  newnode.innerHTML=newitem;
  div.insertBefore(newnode,button);
}
</script>
</head>
<body>
<form name="form1">
<div ID="items">
<strong>Предмет</strong> <input type="text" name="qty1" size="10">
<strong>Описание</strong> <input type="text" name="item1" size="35">
<br>
<input type="button" value="Добавить"
onClick="AddItem();" ID="add" class="b">
</div>
</form>
</body>
</html>

Подскажите как сделать так, чтобы поля ввода располагались в ячейках таблицы.

Автор: vasac 21.8.2006, 15:59
В какой таблице? Где здесь таблица?
По коду видно, что ты знаешь и document.createElement и insertBefore, зачем же ты инпуты через innerHTML делаешь?

Автор: Avtor 21.8.2006, 16:03
Естественно таблицы тут нет, но мне надо чтобы поля ввода располагались в ячейках таблицы, и я не знаю как это реализовать.

Автор: Tony 21.8.2006, 16:35
Я 4егото не понал тебя.Нужно 4тобы твои поля формы перешли в таблицу или зна4ения вводимые в поля отображлись в таблице ?

Автор: vasac 21.8.2006, 17:26
Цитата(Avtor @  21.8.2006,  16:03 Найти цитируемый пост)
Естественно таблицы тут нет, но мне надо чтобы поля ввода располагались в ячейках таблицы, и я не знаю как это реализовать. 

Так какой таблице, если ее нет?

Ты хочешь создать таблицу с инпутами? Так ты пишешь:
Код

  newitem="<strong>Предмет </strong>";
  newitem+="<input type=\"text\" name=\"qty" + items;
  newitem+="\" size=\"10\"> ";
...

Что тебе мешает здесь прописать таблицу?

Автор: pythonwin 21.8.2006, 17:52
Avtor, есть такая библиотека http://mochikit.com:
1) она бесплатная и с открытым кодом
2) позволяет работать с элементами форм и ячейками таблиц, например как с объектами в питоне.

чуть позже дам код.

Автор: pythonwin 22.8.2006, 07:38
Вот код, который обещал:

Код

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Новая страница 1</title>
<script src="http://mochikit.com/MochiKit/MochiKit.js"></script>
<script type=text/javascript>

A1=Array()
Count_a=2
A1[0]=[1,'2']
A1[1]=[2,'2']

                    
j=1
function f1()
{
j=j+1
s1=SELECT({name:'select_'+j, id:'select_'+j}, OPTION({value:A1[0][0]}, A1[0][1]))
for (c1 in A1) {if (c1>0){s1.appendChild(OPTION({value:A1[c1][0]}, A1[c1][1]))}}
Table_0=document.getElementById('table1')
tr_=Table_0.insertRow(Table_0.rows.length)
tr_.id='tr_'+j
tr_.appendChild(
TD({bgcolor:"#FFFFFF", id:'td_'+j},
INPUT({name:'input_'+j, id:'input_'+j},'')))
tr_.appendChild(TD({bgcolor:"#FFFFFF"},s1))
tr_.appendChild(TD({bgcolor:"#FFFFFF", align:"right"},
                   BUTTON({name:'B1', id:'b1_'+j, onclick:"javascript: return removeL("+j+")"},'-'),
                   INPUT({id:"input_id_"+j, name:"input_id_"+j, type:"hidden", value:"-1"},"-1")
                   ))
return false;
}

// remove row
function removeL(i)
{
Table_0=document.getElementById('table1');
tr_=document.getElementById('tr_'+i)
Table_0.deleteRow(tr_.rowIndex);
//j=j-1
return false;
}

</script>
</head>

<body>

<form method="POST" action="--WEBBOT-SELF--">
    <table border="1" width="84%" id="table1">
        <tr>
            <td><input type="submit" value="Send" name="B1"></td>
            <td width="221"><input type="reset" value="Reset" name="B2"></td>
            <td width="133">&nbsp;</td>
        </tr>
        <tr>
            <td><input type="text" name="T1" size="20"></td>
            <td width="221"><select size="1" name="D1">
            <option value="1">1</option>
            <option value="2">2</option>
            </select></td>
            <td width="133"><input type="button" value="+" name="B3" onclick="javascript: return f1();"></td>
        </tr>
    </table>
</form>

</body>

</html>



на этой страничке библиотека mochikit загружается с http://mochikit.com/MochiKit/, но можно скачать http://mochikit.com/dist/MochiKit-1.3.1.zip на ПК и изменить 
Код
<script src="http://mochikit.com/MochiKit/MochiKit.js"></script>
 на путь на ПК.

Автор: Avtor 22.8.2006, 08:49
pythonwin, спасибо за помощь. Просто я хочу довести до ума начатое. Вот что у меня получилось, но это не работает. Подскажите где исправить, пожалуйста:
Код

var items=1;
function AddItem() {
  table_0 = document.getElementById("table1");
  button = document.getElementById("add");
  items++;
  newitem = "<tr><td>Предмет</td>";
  newitem += "<td>Описание</td></tr>";  
  newitem += "<tr><td><input type=\"text\" name=\"qty" + items;
  newitem += "\" size=\"10\"></td>";
  newitem += "<td><input type=\"text\" name=\"item" + items;
  newitem += "\" size=\"35\"></td></tr>";
  newnode = document.createElement("span");
  newnode.innerHTML=newitem;
  table_0.insertBefore(newnode, button);
}
 
Код

<table border="1" width="100%" ID="table1">
  <tr>
    <td>Предмет</td>
    <td>Описание</td>
  </tr>    
  <tr>
    <td><input type="text" name="qty1" size="10" /></td>
    <td><input type="text" name="item1" size="35" /></td>
  </tr>    
  <tr>
    <td colspan="2"><input type="button" value="Добавить поля" onClick="AddItem();" ID="add" /></td>
    <td></td>
  </tr> 
</table>         

Автор: vasac 22.8.2006, 08:56
Avtor, если ты делаешь через innerHTML, то и делай все через него:
newitem = '<table><tr><td>...';

Если же делаешь через DOM, то работай с таблицей через соответствующий http://wdh.suncloud.ru/dhtml07.htm#ref4741.

Автор: pythonwin 22.8.2006, 08:59
Avtor, я не сторонник использования innerHTML, - я за использование DOM

Автор: Avtor 22.8.2006, 10:48
Наконец-то я это сделал: 
Код

function AddItem() {
  table_0 = document.getElementById("table1");
  items++;
  oRow = document.createElement("TR");
  //-------------------------------------------
  oCellQty = document.createElement("TD");
  oInputQty = document.createElement("INPUT");
  oInputQty.type = "text";
  oInputQty.size = "80";
  oInputQty.name = "qty" + items;  
  oCellQty.appendChild(oInputQty);
  //-------------------------------------------
  oCellItem = document.createElement("TD");
  oInputItem = document.createElement("INPUT");
  oInputItem.type = "text";
  oInputItem.size = "80";
  oInputItem.name = "item" + items;  
  oCellItem.appendChild(oInputItem);
  //-------------------------------------------
  oRow.appendChild(oCellQty);  
  oRow.appendChild(oCellItem);  
  //-------------------------------------------
  table_0.appendChild(oRow);
}

Но новая беда - это отлично работает под мазиллой, и вообще никак в IE. Как быть? Где ошибка?

Автор: pythonwin 22.8.2006, 10:58
Avtor, я конечно не навязываю, но почему не хочешь использовать либу mochikit?  smile 


Автор: vasac 22.8.2006, 11:17
Цитата(Avtor @  22.8.2006,  10:48 Найти цитируемый пост)
Но новая беда - это отлично работает под мазиллой, и вообще никак в IE. Как быть? Где ошибка?

Возможно IE еще <tbody> хочет. Я же дал ссылку на интерфейс таблицы, там все без createElement( "<tr>" ) делается.

Автор: Avtor 22.8.2006, 11:24
А не работало вот из-за этого куска:
Код

  for(i = 0; i < table_0.childNodes.length; i++)
    if(table_0.childNodes[i].nodeType == 1 && table_0.childNodes[i].nodeName.toLowerCase() == "tbody") {
      table_0 = table_0.childNodes[i];
      break;
    }  

Автор: pythonwin 22.8.2006, 11:38
Avtor, а полный исправленный код можешь привести?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)