Страница 1 из 1
Добавление полей
Добавлено:
Пн авг 24, 2009 12:45
Jedi
Как бы лучше реализовать следующую. фишку.
дан див.
- Код: Выделить всё
<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 + "новый инпут";
Всё хорошо в ИЕ. но вот в ФФ он добавляет но стирает значения которые были в предыдущих полях. Как можно сделать так чтобы в ФФ значения предыдущих полей оставались и лобавлялся новый инпут?
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 13:21
Muerto
Блин, 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>
Написал на скорую руку, но работать должно.
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 13:46
Jedi
хм. да ступил. совсем забыл про dom
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 15:04
Jedi
а в ие данная тема не работает :(
- Код: Выделить всё
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);
}
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 16:14
Muerto
Jedi
Для начала замени newField.setAttribute("class", "text_area"); на newField.className = "text_area";
или используй newField.setAttribute("className", "text_area"); для ИЕ
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 16:28
Muerto
Попробуй в добавлении использовать заместо table.appendChild(newTr); что-нибудь типа table.getElementsByTagName("tr")[table.getElementsByTagName("tr").length-1].insertBefore(newTr);
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 16:41
Jedi
table.getElementsByTagName("tr")[table.getElementsByTagName("tr").length-1].insertBefore(newTr);
в ИЕ заработало. перестало работать в ФФ
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 16:50
Muerto
А! И ещё! Используй конструкцию:
- Код: Выделить всё
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;");
Ие понимает первую, остальные - вторую.
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 16:53
Muerto
Jedi писал(а):table.getElementsByTagName("tr")[table.getElementsByTagName("tr").length-1].insertBefore(newTr);
в ИЕ заработало. перестало работать в ФФ
Так поставь условие на (window.navigator.userAgent.indexOf("MSIE")>-1)
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 17:05
Jedi
Еще в ФФ работает newField.setAttribute("onClick", "GetLine("+i+")");
А вот как в ие сделать?
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 17:13
Alkeeper
Как насчет
- Код: Выделить всё
newfield = document.getElementById('pattern').cloneNode(true);
newfield.name = 'newname';
// и т.д.
?
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 17:16
Jedi
Это типа чтобы не писать каждый раз ?
newField = document.createElement("input");
newField.setAttribute("type", "text");
...
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 17:17
Jedi
Мне интересно почему table.appendChild(newTr); не хочет рабоать в ие.
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 17:17
Alkeeper
Jedi
Ну да, при необходимости менять только name и id.
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 17:18
Alkeeper
Jedi писал(а):Мне интересно почему table.appendChild(newTr); не хочет рабоать в ие.
Код в студию!
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 17:23
Jedi
- Код: Выделить всё
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()">
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 17:33
Alkeeper
Jedi Написал в личку.
Re: Добавление полей
Добавлено:
Пн авг 24, 2009 20:04
Padonak
Alkeeper писал(а):Jedi Написал в личку.
вы бы это прекратили камераден
тут форум натуралов между прочим
Re: Добавление полей
Добавлено:
Вт авг 25, 2009 8:12
Berezkin
Мне интересно почему 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)
Re: Добавление полей
Добавлено:
Вт авг 25, 2009 9:39
Jedi
ок. спс
Re: Добавление полей
Добавлено:
Вт авг 25, 2009 19:44
Padonak
а я давно где-то увидел table.tBodies[0] терь так всегда пишу
Re: Добавление полей
Добавлено:
Ср авг 26, 2009 20:34
Alkeeper
Padonak писал(а):вы бы это прекратили камераден
Я Джейду к шибко коммерчески-секретному джаваскрипту путь указал, а там он нашел решение.
Т.к. я его где-то в ноябре прошлого года песал, на память хуй воспроизведу. Надеюсь Джейд поделицца =)
Re: Добавление полей
Добавлено:
Чт авг 27, 2009 9:25
Jedi
Да в том скрипте было условие. Если ие то сделать table.innerHTML = table.innerHTML + newTR.innerHTML;
а для остальных вполне работает table.appendChild(newTR);
Но с tbody работает отлично.
Re: Добавление полей
Добавлено:
Чт авг 27, 2009 11:01
Padonak
я не понимаю почему бы не использовать insertRaw и incertCell
Re: Добавление полей
Добавлено:
Чт авг 27, 2009 11:26
Berezkin
В принципе Падонак прав, так будет и короче и правильней. Только вот есть для меня непонятка.
Цитата из статьи:
Метод insertRow принимает в качестве аргумента индекс строки, перед которой будет вставлена новая строка. Возвращает ссылку на новую вставленную строку.
Почему, чтобы вставить строку в конец надо написать
var newrow = table.insertRow(-1);, а не
var newrow = table.insertRow(table.rows.length - 1);?
Re: Добавление полей
Добавлено:
Чт авг 27, 2009 11:43
Jedi
Padonak
Ну я не такой продвинутый спец в ЯС как ты, поэтому и не знал данные методы. Я ЯС изучал по книжке 2002 года, а там много чего уже нет
Re: Добавление полей
Добавлено:
Чт авг 27, 2009 11:53
Padonak
Jedi
да глупости какой там я продвинутый :-) если бы я с этим работал тогда может быть когда-то и мог бы стать умным а так... просто мне это нравится не более того. давно мне статья попалась и потом не раз пригодилась вот и все. щас я ее тут запощщу и рекомендую ее сохранить кому интересно. хотя вобщем-то там и запомнить все можно - ничо особо заумного нет.
Re: Добавление полей
Добавлено:
Чт авг 27, 2009 12:08
Padonak
да вот собственно линк на оригинал статьи
http://www.softtime.ru/info/articlephp. ... article=67 чо я ее копипастить сюда буду