Например, я хочу иметь html-форму, которая выглядит так:
<table> <tr> <td>Field A:</td> <td><input type='text' name='fielda[1]'></td> <td>Field B:</td> <td><textarea name='fieldb[1]'></textarea></td> </tr> </table> Я хочу добавить кнопку, которая дублирует всю мою форму выше, но меняет 1 на 2 для всех полей. Не только одно поле, но и весь раздел кода, включая таблицу. Там будет больше / разных полей, чем те, которые я опубликовал.
Я уже пробовал это решение, которое делает именно то, что мне нужно:
http://www.quirksmode.org/dom/domform.html
Но по какой-то причине не удалось дублировать функциональность при копировании примеров кода для тестирования. Я даже пытался буквально копировать весь источник страницы, чтобы заставить его работать, но безрезультатно.
<!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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> (function($){ $countForms = 1; $.fn.addForms = function(){ var myform = "<table>"+ " <tr>"+ " <td>Field A ("+$countForms+"):</td>"+ " <td><input type='text' name='fielda["+$countForms+"]'></td>"+ " <td>Field B ("+$countForms+"):</td>"+ " <td><textarea name='fieldb["+$countForms+"]'></textarea></td>"+ " <td><button>remove</button></td>"+ " </tr>"+ "</table>"; myform = $("<div>"+myform+"</div>"); $("button", $(myform)).click(function(){ $(this).parent().parent().remove(); }); $(this).append(myform); $countForms++; }; })(jQuery); $(function(){ $("#mybutton").bind("click", function(){ $("#container").addForms(); }); }); </script> </head> <body> <button id="mybutton">add form</button> <div id="container"></div> </body> </html>
Существует так называемый метод замены, который делает это. Я этого не писал, думаю, Дуглас Крокфорд. Но я процитирую это:
Теперь, когда ваша программа JavaScript получила данные, что она может с ней сделать? Одной из самых простых вещей является создание HTML на стороне клиента.
var template = '<table border="{border}"><tr><th>Last</th><td>{last}</td></tr>' + '<tr><th>First</th><td>{first}</td></tr></table>';
Обратите внимание, что у нас есть шаблон HTML с тремя переменными. Затем мы получим объект JSON, содержащий элементы, соответствующие переменным.
var data = { "first": "Carl", "last": "Hollywood", "border": 2 };
Затем мы можем использовать метод вытеснения для заполнения шаблона данными.
mydiv.innerHTML = template.supplant(data);
Строки JavaScript не имеют метода вытеснения, но это нормально, потому что JavaScript позволяет нам наращивать встроенные типы, предоставляя им нужные нам функции.
String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g, function (a, b) { var r = o[b]; return typeof r === 'string' ? r : a; } ); };
С http://www.json.org/fatfree.html
Один из методов, который я видел, чтобы избежать этого беспорядочного назначения переменной шаблона:
<script id="rowTemplate" type="text/html"> <tr> <td>Field A:</td> <td><input type='text' name='fielda[{id}]'></td> <td>Field B:</td> <td><textarea name='fieldb[{id}]'></textarea></td> </tr> </script>
Это позволит вам писать гораздо более красивый код, поскольку вы можете ссылаться на него с помощью getElementById.
Таким образом, в вашем случае, вместо того, чтобы заполнять его объектом JSON, вы просто просмотрите все строки, которые вам нужно добавить и заменить идентификаторы.
Пример, на который вы ссылаетесь, имеет скрытую версию формы, которая используется в качестве шаблона. Этот шаблон имеет идентификатор ( readroot ), который позволяет легко его выбирать ( getElementById ), затем клонировать ( node.cloneNode() ) и вводить в DOM выше ( node.insertBefore() ) второй маркер в источнике ( writeroot ).
Количество дубликатов учитывается в counter переменных. Его содержимое обновляется (увеличивается) при каждом клонировании, а его значение затем добавляется ко всем именам полей в клонированном узле. (Исходные поля шаблонов-узлов не имеют числового суффикса.)
Все это очень просто, просто изучите javascript в главной части веб-страницы. Google части, которые вы не можете понять, и вы достигнете того, что ищете, и узнаете о них в процессе. Прибыль!
Я думаю, вы должны использовать какую-то библиотеку, такую как jQuery, как некоторые предложили. Это окупится.
Что касается создания шаблона и клонирования его в javascript, есть некоторые проблемы при использовании IE (все версии, насколько я знаю). IE будет игнорировать любые программные изменения свойства 'name' при дублировании, например, радиокнопок в форме. Поэтому, если вы не создадите пользовательские обработчики событий для переключателей, они не будут работать так, как ожидалось, когда вы скопируете их по разделам (например, проверка кнопки в одном разделе приведет к отключению кнопки в другом разделе).
Ой, читайте вопрос неправильно. Это лучше:
function duplicate(frm) { newfrm = $(frm).clone(); $(newfrm).each(function(i,o) { if (o.name != null) { // or if ($(o).attr("name")) o.name = replaceIndex(o.name); } }); $(frm).parent().append(newfrm); }
Не уверен в действительном синтаксисе. Например, как вы проверяете наличие атрибута. Однако легко найти в Google. Здесь replaceIndex (string) использует lastIndexOf (), чтобы найти последний [x] и заменить его на [x + 1].