本文介绍了你如何使用JavaScript来复制表单域?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

例如,我想有一个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例子来测试的时候,无法复制的功能。我甚至尝试从字面上复制整个页面的源代码,以得到它的工作,没有用的。

解决方案

 < D​​OCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0过渡// ENHTTP! //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< HTML的xmlns =htt​​p://www.w3.org/1999/xhtml>
< HEAD>
<脚本SRC =htt​​p://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的= $(< D​​IV>中+ MyForm的+< / DIV>中);
    $(按钮,$(MyForm的))点击(函数(){$(本).parent()父()删除();});

    $(本).append(MyForm的);
    $ countForms ++;
    };
    })(jQuery的);

    $(函数(){
    $(#myButton的)。绑定(点击,函数(){
    $(#集装箱)addForms()。
    });
    });

< / SCRIPT>
< /头>
<身体GT;
<按钮ID =myButton的>添加形式LT; /按钮>
< D​​IV 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来复制表单域?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 18:53