【问题标题】:jquery create inputs and array name of inputsjquery 创建输入和输入的数组名称
【发布时间】:2011-03-16 17:26:28
【问题描述】:

键入他们想要的输入数量并单击“开始”,它会创建那么多输入字段。我怎样才能让每个人都有自己独特的名字?

我想为每个创建的输入设置唯一的名称,即:

  • 第一个输入:name="productcode1"
    name="desc1" name="dollars1" name="cents1"
  • 第二个输入:name="productcode2"
    name="desc2" name="dollars2" name="cents2"

      $(document).ready(function(){
        $('#addButton').click(function(){
          var count = parseInt($('#quantity').val());
          var newHTML = [];
          for(var i=0;i<count;i++){
            newHTML.push('Product Code: <input name="productcode[]" type="text"/> &nbsp;&nbsp;Description: <input name="desc[]" type="text"/>&nbsp;&nbsp; $<input width="100px" type="text" name="dollars[]" size="5" maxlength="6"/>.<input width="50px" type="text" name="cents[]" size="1" maxlength="2"/><br/>');
          }
          $('#sandbox').html(newHTML.join(''));
        });
      });
    

仅供参考,如果更容易合并,我也在使用 PhP

【问题讨论】:

    标签: jquery arrays input


    【解决方案1】:

    你可以看到fiddle上的内容:

    $(document).ready(function(){
            var numberOfInputs = 0;
            $('#addButton').click(function(){
    
              var count = parseInt($('#quantity').val());
              var newHTML = [];
              for(var i=0;i<count;i++){
                var html = $('Product Code: <input name="productcode" type="text"/> &nbsp;&nbsp;Description: <input name="desc" type="text"/>&nbsp;&nbsp; $<input width="100px" type="text" name="dollars" size="5" maxlength="6"/>.<input width="50px" type="text" name="cents" size="1" maxlength="2"/><br/>');
                $(html[0]).attr('name',$(html[0]).attr('name')+numberOfInputs);
                $(html[2]).attr('name',$(html[2]).attr('name')+numberOfInputs);
                $(html[4]).attr('name',$(html[4]).attr('name')+numberOfInputs);
                $(html[6]).attr('name',$(html[6]).attr('name')+numberOfInputs);
                numberOfInputs++
                newHTML.push(html);
                $('#sandbox').append(html);
              }
    
            });
      });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-10-15
      • 2022-11-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2010-12-19
      • 1970-01-01
      • 2012-08-30
      相关资源
      最近更新 更多