Question

我在这里发现了很好的javascript javascript duplicate field

但问题是我希望限制功能只能复制到10行。

这是我的代码。

<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>

所以任何建议都会非常感激！

感谢。

Answer 1

呃，我觉得这样做很脏。你在链接的问题中有很多其他更好的答案。

  $.fn.addForms = function(){
      if ($countForms == 10 ) {
          $("#mybutton").unbind("click");
          return;
      }
      var myform = "<table>"+

Answer 2

只需在功能中添加一个检查，强制它停在10个字段

<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;
    $formLimit = 10;
    $.fn.addForms = function(){
      if(countForms >= formLimt){
        return;
      }
      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>

如何从重复的表单字段限制Javascript？

2 个答案: