1

我有一排文本框，我有一个函数可以根据函数中的数字来克隆它们。因此，如果将有 4 个用户，那么我希望该行克隆 4 次以输入 4 个用户的信息。但我也想要某种方式能够提交此表单，我无法弄清楚如何为每个文本框赋予每一行一个唯一的类或 id，以便我可以在提交时阅读它们。

我正在考虑在第一行的所有内容中为每个类（或 id）添加“1”，然后在第二行中的所有内容中添加“2”。但我不太确定如何做到这一点。我在 jsFiddle中有一个示例，由于我尝试添加 for 循环并克隆了一定次数，现在克隆甚至根本不起作用-如果有人有任何建议，它真的会帮助我。

<div class="RegisterContainer">
  <div class="RegisterHead"><a>Register Attendees</a></div>
    <div class="placenewrows"></div>
</div>
<br />
<input type="button" onclick="fnCloneTemplate({'number' : '3'});" value="make 3 rows">

<div class="_template">
  <a class="left1">First Name:</a>
  <a class="left2"></a><a class="left2">Last Name:</a>
  <a class="left3">Phone #</a><a class="left4">Email:</a>
  <a class="left5">Optional Comment</a><br />
  <input type="text" class="tFirstName left1"/>
  <input type="text" class="tLastName left2"/>
  <div class="phonenumberbox left3">
    <input type="text" class="first3digits" maxlength="3" />
    <a style="position:relative;top:-1px;">-</a>
    <input type="text" class="next3digits" maxlength="3" />
    <a style="position:relative;top:-1px;">-</a>
    <input type="text" class="last4digits" maxlength="4" />
 </div>                                                                                              <input type="text" class="tEmail left4"/>   


function fnCloneTemplate(x){
    var NumofClones = (x.number * 1);
    for(i=0; i <= NumofClones; i++)
    {
       var newrow = $('._template').clone().removeclass('_template');
        $('.placenewrows').append(newrow);
    }    
}

​</p>

4

2 回答 2

4

您的代码中有一个错字：

var newrow = $('._template').clone().removeclass('_template');
                                     //----^

removeclass应该是removeClass。

http://jsfiddle.net/y543n/

此外，您还没有在小提琴中加载 jQuery，并且存在范围问题，您使用的是 HTML onclick 属性，并且未定义该上下文中的函数。您可以改用 jQuery click 方法：

$('input[type=button]').click(function(e){
   e.preventDefault();
   // ....
})

$('input[type=button]').click(function(e) {
    var numofClones = 3;
    e.preventDefault();
    var b = $('.placenewrows input[type=text]').length;
    var newrow = $('._template').clone().removeClass('_template').find('input[type=text]').addClass(function(i, cur) {
            return 'something' + ++b
    }).end()
    for (i = 0; i < numofClones; i++) {
        $('.placenewrows').append(newrow);
    }
})​

http://jsfiddle.net/bgCXX/

于 2012-09-22T17:15:56.957 回答
1

您可以像下面这样更改您的功能，以避免多次克隆。

function fnCloneTemplate(e){
    var NumofClones = (e.data.number * 1),
        newrow= $('._template').clone().removeClass('_template'); // in your code
                                                                  // removeClass spelling
                                                                  // mistaken
    for (i=0; i<NumofClones; i++)
    {
        $('.placenewrows').append(newrow);
    }    
}

使用on()：

HTML

<input type="button"value="make 3 rows" id="make_clone">

jQuery

function fnCloneTemplate(e){
    var NumofClones = (e.data.number * 1),
        newrow= $('._template').clone().removeClass('_template');
    for (i=0; i<NumofClones; i++)
    {
        $('.placenewrows').append(newrow);
    }    
}

$('#make_clone').on('click',{'number' : '3'}, fnCloneTemplate);

演示

克隆和唯一的完整代码class

function fnCloneTemplate(x) {
    var NumofClones = (x.data.number * 1),
        clone = $('._template').clone().removeClass('_template');
    for (i = 0; i <= NumofClones; i++) {
        var newrow =    clone
                        .find('input[type=text]')
                        .attr('class', function(i, oldClass) {                             
                                return oldClass.replace(/\d/, function(char) {
                                    return +char + i ;
                                });
                                return newClass
                            })
                        .end();
        $('.placenewrows').append(newrow);
    }
}
于 2012-09-22T17:12:55.413 回答