你如何使用JavaScript来复制表单域？ [英] How do you use Javascript to duplicate form fields?
问题描述
例如，我想有一个HTML表单，看起来像这样：
＆LT;表＆gt;
＆其中; TR＆GT;
＆LT; TD＆GT;现场答：＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称='FIELDA [1]'＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;现场B：＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; textarea的名字='fieldb [1]'＆GT;＆LT; / textarea的＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
我要的是添加一个按钮，复制我的整个以上形式，但改变了1到2的所有领域。不只是一个场，但code中的整个部分，包括table.There会比那些我贴以及更多的/不同的领域。
我已经尝试过这种解决方案，这不正是我需要的：
http://www.quirksmode.org/dom/domform.html
但由于某些原因复制code例子来测试的时候，无法复制的功能。我甚至尝试从字面上复制整个页面的源代码，以得到它的工作，没有用的。
＆LT; DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENHTTP！ //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT;脚本SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT; META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= ISO-8859-1/＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
（函数（$）{
$ countForms = 1;
$ .fn.addForms =功能（）{
VAR的MyForm =＆LT;表＆gt;+
＆其中; TR＆gt;中+
＆LT; TD＆GT;现场A（+ $ countForms +）：其中; / TD＆gt;中+
＆LT; TD＆GT;＆LT;输入类型=文本名称='FIELDA [+ $ countForms +]'＆GT;＆LT; / TD＆gt;中+
＆其中; TD＆GT;场B的（+ $ countForms +）：其中; / TD＆gt;中+
＆LT; TD＆GT;＆LT; textarea的名字='fieldb [+ $ countForms +]'＆GT;＆LT; / textarea的＆GT;＆LT; / TD＆gt;中+
＆LT; TD＆GT;＆LT;按钮＆GT;删除＆LT; /按钮＆GT;＆LT; / TD＆gt;中+
＆所述; / TR＆gt;中+
＆LT; /表＆gt;;
MyForm的= $（＆LT; DIV＆gt;中+ MyForm的+＆LT; / DIV＆gt;中）;
$（按钮，$（MyForm的））点击（函数（）{$（本）.parent（）父（）删除（）;}）;
$（本）.append（MyForm的）;
$ countForms ++;
};
}）（jQuery的）;
$（函数（）{
$（＃myButton的）。绑定（点击，函数（）{
$（＃集装箱）addForms（）。
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;按钮ID =myButton的＆gt;添加形式LT; /按钮＆GT;
＆LT; DIV ID =容器＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
For instance, I want to have a html form that looks like this:
<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>
What I want is to add a button that duplicates my entire above form, but changes the 1 to a 2 for all of the fields. Not just one field, but the entire section of code, including the table.There will be more/different fields than the ones I posted as well.
I've already tried this solution, which does exactly what I need:
http://www.quirksmode.org/dom/domform.html
But for some reason, could not duplicate the functionality when copying the code examples to test. I even tried literally copying the entire page source to get it to work, with no avail.
<!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来复制表单域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
