问题描述
例如,我想有一个HTML表单,看起来像这样:
<表>
&其中; TR>
< TD>现场答:< / TD>
< TD><输入类型=文本名称='FIELDA [1]'>< / TD>
< TD>现场B:< / TD>
< TD>< textarea的名字='fieldb [1]'>< / textarea的>< / TD>
< / TR>
< /表>
我要的是添加一个按钮,复制我的整个以上形式,但改变了1到2的所有领域。不只是一个场,但code中的整个部分,包括table.There会比那些我贴以及更多的/不同的领域。
我已经尝试过这种解决方案,这不正是我需要的:
http://www.quirksmode.org/dom/domform.html
但由于某些原因复制code例子来测试的时候,无法复制的功能。我甚至尝试从字面上复制整个页面的源代码,以得到它的工作,没有用的。
< DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENHTTP! //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< HTML的xmlns =http://www.w3.org/1999/xhtml>
< HEAD>
<脚本SRC =http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js类型=文/ JavaScript的>< / SCRIPT>
< META HTTP-当量=Content-Type的CONTENT =text / html的;字符集= ISO-8859-1/>
<脚本类型=文/ JavaScript的>
(函数($){
$ countForms = 1;
$ .fn.addForms =功能(){
VAR的MyForm =<表>+
&其中; TR>中+
< TD>现场A(+ $ countForms +):其中; / TD>中+
< TD><输入类型=文本名称='FIELDA [+ $ countForms +]'>< / TD>中+
&其中; TD>场B的(+ $ countForms +):其中; / TD>中+
< TD>< textarea的名字='fieldb [+ $ countForms +]'>< / textarea的>< / TD>中+
< TD><按钮>删除< /按钮>< / TD>中+
&所述; / TR>中+
< /表>;
MyForm的= $(< DIV>中+ MyForm的+< / DIV>中);
$(按钮,$(MyForm的))点击(函数(){$(本).parent()父()删除();});
$(本).append(MyForm的);
$ countForms ++;
};
})(jQuery的);
$(函数(){
$(#myButton的)。绑定(点击,函数(){
$(#集装箱)addForms()。
});
});
< / SCRIPT>
< /头>
<身体GT;
<按钮ID =myButton的>添加形式LT; /按钮>
< DIV ID =容器>< / DIV>
< /身体GT;
< / HTML>
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来复制表单域?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!