VPF::динамическое добавление полей

Avtor

Дата 21.8.2006, 14:38 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 111
Регистрация: 21.7.2006

Репутация: нет
Всего: нет

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36

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

--------------------

Блог ГО | Таблица символов юникода

Avtor

Дата 21.8.2006, 16:03 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 111
Регистрация: 21.7.2006

Репутация: нет
Всего: нет

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

Tony

Дата 21.8.2006, 16:35 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1159
Регистрация: 3.3.2006
Где: Riga

Репутация: 1
Всего: 12

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

--------------------

vasac

Дата 21.8.2006, 17:26 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

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

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

--------------------

портал по Python
раздел на винграде по Python
язык Python

pythonwin

Дата 22.8.2006, 07:38 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

Вот код, который обещал:

Код


<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/, но можно скачать отсюда на ПК и изменить

Код

<script src="http://mochikit.com/MochiKit/MochiKit.js"></script>

на путь на ПК.

--------------------

портал по Python
раздел на винграде по Python
язык Python

Avtor

Дата 22.8.2006, 08:49 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 111
Регистрация: 21.7.2006

Репутация: нет
Всего: нет

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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36

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

Если же делаешь через DOM, то работай с таблицей через соответствующий интерфейс.

--------------------

Блог ГО | Таблица символов юникода

pythonwin

Дата 22.8.2006, 08:59 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

Avtor, я не сторонник использования innerHTML, - я за использование DOM

--------------------

портал по Python
раздел на винграде по Python
язык Python

Avtor

Дата 22.8.2006, 10:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 111
Регистрация: 21.7.2006

Репутация: нет
Всего: нет

Наконец-то я это сделал:

Код


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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

Avtor, я конечно не навязываю, но почему не хочешь использовать либу mochikit? smile

--------------------

портал по Python
раздел на винграде по Python
язык Python

vasac

Дата 22.8.2006, 11:17 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36

Цитата(Avtor @ 22.8.2006, 10:48

)

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

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

--------------------

Блог ГО | Таблица символов юникода

Avtor

Дата 22.8.2006, 11:24 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 111
Регистрация: 21.7.2006

Репутация: нет
Всего: нет

А не работало вот из-за этого куска:

Код


  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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

Avtor, а полный исправленный код можешь привести?

--------------------

портал по Python
раздел на винграде по Python
язык Python

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »