Добавление полей

Старый mweb

Модератор: [mweb team]

Добавление полей

Сообщение Jedi Пн авг 24, 2009 12:45

Как бы лучше реализовать следующую. фишку.
дан див.
Код: Выделить всё
<div id="test">
<input type="text" id="t1" name="t1">
<input type="text" id="t2" name="t2">
</div>
<button onClick="addField()">Add</button>


Надо чтобы при нажатии на кнопку добавлялся еще 1 инпут. пробовал
test.innerHTML = test.innerHTML + "новый инпут";

Всё хорошо в ИЕ. но вот в ФФ он добавляет но стирает значения которые были в предыдущих полях. Как можно сделать так чтобы в ФФ значения предыдущих полей оставались и лобавлялся новый инпут?
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Muerto Пн авг 24, 2009 13:21

Блин, Jedi, от тебя такого вопроса не ожидал!
Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function addField() {
   val = document.getElementById("test").getElementsByTagName("input").length + 1;
   newField = document.createElement("input");   
   newField.setAttribute("type", "text");
   newField.setAttribute("id", "t" + val);
   newField.setAttribute("name", "t" + val);
   document.getElementById("test").appendChild(newField);
}
</script>
</head>

<body>
<div id="test">
<input type="text" id="t1" name="t1">
<input type="text" id="t2" name="t2">
</div>
<button onClick="addField()">Add</button>
</body>
</html>

Написал на скорую руку, но работать должно.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Добавление полей

Сообщение Jedi Пн авг 24, 2009 13:46

хм. да ступил. совсем забыл про dom
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Jedi Пн авг 24, 2009 15:04

а в ие данная тема не работает :(
Код: Выделить всё
function AddNewRow()
   {
      var table = document.getElementById("tovar_table");
      i++;
      newTr = document.createElement("tr");
      newTd1 = document.createElement("td");
      newTd1.setAttribute("width", "5%");
      newField = document.createElement("input");
      newField.setAttribute("type", "text");
      newField.setAttribute("id", "tid" + i);
      newField.setAttribute("name", "tid[]");
      newField.setAttribute("class", "text_area");
      newField.setAttribute("style", "width: 100%; border: solid 2px #990000; background-color: #deffde; font-weight: bold; color: #de0000;");
      newTd1.appendChild(newField);
      newTr.appendChild(newTd1);
      
      newTd2 = document.createElement("td");
      newTd2.setAttribute("width", "45%");
      newField = document.createElement("input");
      newField.setAttribute("type", "text");
      newField.setAttribute("id", "tname" + i);
      newField.setAttribute("name", "tname[]");
      newField.setAttribute("class", "text_area");
      newField.setAttribute("style", "width: 100%;");
      newTd2.appendChild(newField);
      newTr.appendChild(newTd2);
      
      newTd3 = document.createElement("td");
      newTd3.setAttribute("width", "8%");
      newField = document.createElement("input");
      newField.setAttribute("type", "text");
      newField.setAttribute("id", "tprice" + i);
      newField.setAttribute("name", "tprice[]");
      newField.setAttribute("class", "text_area");
      newField.setAttribute("style", "width: 100%;");
      newTd3.appendChild(newField);
      newTr.appendChild(newTd3);
      
      newTd4 = document.createElement("td");
      newTd4.setAttribute("width", "5%");
      newField = document.createElement("input");
      newField.setAttribute("type", "text");
      newField.setAttribute("id", "tcount" + i);
      newField.setAttribute("name", "tcount[]");
      newField.setAttribute("class", "text_area");
      newField.setAttribute("style", "width: 100%;");
      newTd4.appendChild(newField);
      newTr.appendChild(newTd4);
      
      newTd5 = document.createElement("td");
      newTd5.setAttribute("width", "15%");
      newField = document.createElement("input");
      newField.setAttribute("type", "text");
      newField.setAttribute("id", "tdisc" + i);
      newField.setAttribute("name", "tdisc[]");
      newField.setAttribute("class", "text_area");
      newField.setAttribute("style", "width: 100%;");
      newTd5.appendChild(newField);
      newTr.appendChild(newTd5);
      
      newTd6 = document.createElement("td");
      newTd6.setAttribute("width", "17%");
      newField = document.createElement("span");
      newField.setAttribute("id", "total" + i);
      newTd6.appendChild(newField);
      newTr.appendChild(newTd6);
      
      newTd7 = document.createElement("td");
      newTd7.setAttribute("width", "5%");
      newField = document.createElement("input");
      newField.setAttribute("type", "button");
      newField.setAttribute("id", "tbutton" + i);
      newField.setAttribute("name", "reCheck");
      newField.setAttribute("value", "Ok");
      newField.setAttribute("onClick", "GetLine("+i+")");
      newTd7.appendChild(newField);
      newTr.appendChild(newTd7);
      
      table.appendChild(newTr);
}
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Muerto Пн авг 24, 2009 16:14

Jedi
Для начала замени newField.setAttribute("class", "text_area"); на newField.className = "text_area";
или используй newField.setAttribute("className", "text_area"); для ИЕ
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Добавление полей

Сообщение Muerto Пн авг 24, 2009 16:28

Попробуй в добавлении использовать заместо table.appendChild(newTr); что-нибудь типа table.getElementsByTagName("tr")[table.getElementsByTagName("tr").length-1].insertBefore(newTr);
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Добавление полей

Сообщение Jedi Пн авг 24, 2009 16:41

table.getElementsByTagName("tr")[table.getElementsByTagName("tr").length-1].insertBefore(newTr);
в ИЕ заработало. перестало работать в ФФ
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Muerto Пн авг 24, 2009 16:50

А! И ещё! Используй конструкцию:
Код: Выделить всё
newField.style.cssText = "width: 100%; border: solid 2px #990000; background-color: #deffde; font-weight: bold; color: #de0000;";
newField.setAttribute("style", "width: 100%; border: solid 2px #990000; background-color: #deffde; font-weight: bold; color: #de0000;");

Ие понимает первую, остальные - вторую.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Добавление полей

Сообщение Muerto Пн авг 24, 2009 16:53

Jedi писал(а):table.getElementsByTagName("tr")[table.getElementsByTagName("tr").length-1].insertBefore(newTr);
в ИЕ заработало. перестало работать в ФФ

Так поставь условие на (window.navigator.userAgent.indexOf("MSIE")>-1)
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Добавление полей

Сообщение Jedi Пн авг 24, 2009 17:05

Еще в ФФ работает newField.setAttribute("onClick", "GetLine("+i+")");
А вот как в ие сделать?
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Alkeeper Пн авг 24, 2009 17:13

Как насчет
Код: Выделить всё
newfield = document.getElementById('pattern').cloneNode(true);
newfield.name = 'newname';
// и т.д.

?
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: Добавление полей

Сообщение Jedi Пн авг 24, 2009 17:16

Это типа чтобы не писать каждый раз ?

newField = document.createElement("input");
newField.setAttribute("type", "text");
...
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Jedi Пн авг 24, 2009 17:17

Мне интересно почему table.appendChild(newTr); не хочет рабоать в ие.
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Alkeeper Пн авг 24, 2009 17:17

Jedi
Ну да, при необходимости менять только name и id.
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: Добавление полей

Сообщение Alkeeper Пн авг 24, 2009 17:18

Jedi писал(а):Мне интересно почему table.appendChild(newTr); не хочет рабоать в ие.

Код в студию!
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: Добавление полей

Сообщение Jedi Пн авг 24, 2009 17:23

Код: Выделить всё
function AddNewRow()
{
   var table = document.getElementById("tovar_table");
   i++;
   newTr = document.createElement("tr");
   newTd1 = document.createElement("td");
   newTd1.setAttribute("width", "5%");
   newField = document.createElement("input");
   newField.setAttribute("type", "text");
   newField.setAttribute("id", "tid" + i);
   newField.setAttribute("name", "tid[]");
   newField.className = "text_area";
   newField.style.cssText = "width: 100%; border: solid 2px #990000; background-color: #deffde; font-weight: bold; color: #de0000;";
   newField.setAttribute("style", "width: 100%; border: solid 2px #990000; background-color: #deffde; font-weight: bold; color: #de0000;");
   newTd1.appendChild(newField);
   newTr.appendChild(newTd1);
   
   newTd2 = document.createElement("td");
   newTd2.setAttribute("width", "45%");
   newField = document.createElement("input");
   newField.setAttribute("type", "text");
   newField.setAttribute("id", "tname" + i);
   newField.setAttribute("name", "tname[]");
   newField.className = "text_area";
   newField.style.width="99%";
   newTd2.appendChild(newField);
   newTr.appendChild(newTd2);
   
   newTd3 = document.createElement("td");
   newTd3.setAttribute("width", "8%");
   newField = document.createElement("input");
   newField.setAttribute("type", "text");
   newField.setAttribute("id", "tprice" + i);
   newField.setAttribute("name", "tprice[]");
   newField.className = "text_area";
   newField.style.width="99%";
   newTd3.appendChild(newField);
   newTr.appendChild(newTd3);
   
   newTd4 = document.createElement("td");
   newTd4.setAttribute("width", "5%");
   newField = document.createElement("input");
   newField.setAttribute("type", "text");
   newField.setAttribute("id", "tcount" + i);
   newField.setAttribute("name", "tcount[]");
   newField.className = "text_area";
   newField.style.width="95%";
   newTd4.appendChild(newField);
   newTr.appendChild(newTd4);
   
   newTd5 = document.createElement("td");
   newTd5.setAttribute("width", "15%");
   newField = document.createElement("input");
   newField.setAttribute("type", "text");
   newField.setAttribute("id", "tdisc" + i);
   newField.setAttribute("name", "tdisc[]");
   newField.className = "text_area";
   newField.style.width="99%";
   newTd5.appendChild(newField);
   newTr.appendChild(newTd5);
   
   newTd6 = document.createElement("td");
   newTd6.setAttribute("width", "17%");
   newField = document.createElement("span");
   newField.setAttribute("id", "total" + i);
   newTd6.appendChild(newField);
   newTr.appendChild(newTd6);
   
   newTd7 = document.createElement("td");
   newTd7.setAttribute("width", "5%");
   newField = document.createElement("input");
   newField.setAttribute("type", "button");
   newField.setAttribute("id", "tbutton" + i);
   newField.setAttribute("name", "reCheck");
   newField.setAttribute("value", "Ok");
   newField.setAttribute("onClick", "GetLine("+i+")");
   newField.onClick="GetLine("+i+")";
   newTd7.appendChild(newField);
   newTr.appendChild(newTd7);
   table.appendChild(newTr);

}


Код: Выделить всё
<table width="100%" id="tovar_table">
   <tr>
      <td width="5%"><b>Код</b></td>
      <td width="45%"><b>Название</b></td>
      <td width="8%"><b>Цена</b></td>
      <td width="5%"><b>Кол-во</b></td>
      <td width="15%"><b>Дисконтная карта</b></td>
      <td width="17%"><b>Итого</b></td>
      <td width="5%"></td>
   </tr>
</table>
<br>
<input type="button" value="Ещё..." onClick="AddNewRow()">
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Alkeeper Пн авг 24, 2009 17:33

Jedi Написал в личку.
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: Добавление полей

Сообщение Padonak Пн авг 24, 2009 20:04

Alkeeper писал(а):Jedi Написал в личку.


вы бы это прекратили камераден -12- тут форум натуралов между прочим -44-
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: Добавление полей

Сообщение Berezkin Вт авг 25, 2009 8:12

Мне интересно почему table.appendChild(newTr); не хочет рабоать в ие.

Чтобы работало в ИЕ надо добавлять чилда не в <table>, а в <tbody>. Иначе ИЕ не понимает... туговат он.

Еще в ФФ работает newField.setAttribute("onClick", "GetLine("+i+")");
А вот как в ие сделать?

Код: Выделить всё
// IE и нормальные браузеры понимают
newField.onclick = function() {
    GetLine(i);
}


И вот так будет лучше:
Код: Выделить всё

var table = document.getElementById("tovar_table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
i++;

newTr = document.createElement("tr");
newTd1 = document.createElement("td");
newTd1.style.width = 5 + "%";
newField = document.createElement("input");
newField.type = "text";
newField.id = "tid" + i;
newField.name = "tid[]";
newField.className = "text_area";
newField.style.cssText = "width: 100%; border: solid 2px #990000; background-color: #deffde; font-weight: bold; color: #de0000;";
newField.setAttribute("style", "width: 100%; border: solid 2px #990000; background-color: #deffde; font-weight: bold; color: #de0000;");

newTd1.appendChild(newField);
newTr.appendChild(newTd1);
tbody.appendChild(newTr)
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Re: Добавление полей

Сообщение Jedi Вт авг 25, 2009 9:39

ок. спс
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Padonak Вт авг 25, 2009 19:44

а я давно где-то увидел table.tBodies[0] терь так всегда пишу
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: Добавление полей

Сообщение Alkeeper Ср авг 26, 2009 20:34

Padonak писал(а):вы бы это прекратили камераден -12-

Я Джейду к шибко коммерчески-секретному джаваскрипту путь указал, а там он нашел решение.
Т.к. я его где-то в ноябре прошлого года песал, на память хуй воспроизведу. Надеюсь Джейд поделицца =)
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: Добавление полей

Сообщение Jedi Чт авг 27, 2009 9:25

Да в том скрипте было условие. Если ие то сделать table.innerHTML = table.innerHTML + newTR.innerHTML;
а для остальных вполне работает table.appendChild(newTR);

Но с tbody работает отлично.
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Padonak Чт авг 27, 2009 11:01

я не понимаю почему бы не использовать insertRaw и incertCell -08-
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: Добавление полей

Сообщение Berezkin Чт авг 27, 2009 11:26

В принципе Падонак прав, так будет и короче и правильней. Только вот есть для меня непонятка.
Цитата из статьи:
Метод insertRow принимает в качестве аргумента индекс строки, перед которой будет вставлена новая строка. Возвращает ссылку на новую вставленную строку.

Почему, чтобы вставить строку в конец надо написать var newrow = table.insertRow(-1);, а не var newrow = table.insertRow(table.rows.length - 1);?
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Re: Добавление полей

Сообщение Jedi Чт авг 27, 2009 11:43

Padonak
Ну я не такой продвинутый спец в ЯС как ты, поэтому и не знал данные методы. Я ЯС изучал по книжке 2002 года, а там много чего уже нет
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1852
Зарегистрирован: Вс сен 08, 2002 0:01
Откуда: Russia

Re: Добавление полей

Сообщение Padonak Чт авг 27, 2009 11:53

Jedi

да глупости какой там я продвинутый :-) если бы я с этим работал тогда может быть когда-то и мог бы стать умным а так... просто мне это нравится не более того. давно мне статья попалась и потом не раз пригодилась вот и все. щас я ее тут запощщу и рекомендую ее сохранить кому интересно. хотя вобщем-то там и запомнить все можно - ничо особо заумного нет.
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: Добавление полей

Сообщение Padonak Чт авг 27, 2009 12:08

да вот собственно линк на оригинал статьи http://www.softtime.ru/info/articlephp. ... article=67 чо я ее копипастить сюда буду
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону


Вернуться в Архив

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 17

cron