Question

我要做的是当用户自动键入数量时，jquery必须创建带有输入的数量。

所以我用这段代码生成

$( "#cont_qty" ).change(function() 
{   
    var cont_qty = this.value;
    for(var i=1 ; cont_qty>i; i++)
    {
    itemCount++;
    // dynamically create rows in the table
       var auto_tr = '<tr id="tr'+itemCount+'"><td><input class="input-medium" type="text" id="cont_no'+itemCount+'" name="cont_no'+itemCount+'" value=""></td></tr>';      

       $("#munna").append(auto_tr)
    }
});

如果用户键入5然后它现在创建4如果用户更改值并键入7然后必须删除先前创建的那些4然后必须创建6

现在我不知道如何删除

Answer 1

在循环前清空，从零开始

$( "#cont_qty" ).change(function()  {   
    var cont_qty = this.value;

    $("#munna").empty();

    for(var i=0 ; cont_qty>i; i++) {
       itemCount++;
       var auto_tr = '<tr id="tr'+itemCount+'"><td><input class="input-medium" type="text" id="cont_no'+itemCount+'" name="cont_no'+itemCount+'" value=""></td></tr>';      

       $("#munna").append(auto_tr)
    }
});

Answer 2

使用 Html（）而非追加（）

$("#cont_qty").change(function () {
    var cont_qty = this.value;
    var html = "";
    for (var i = 1; cont_qty >= i; i++) {
        itemCount++;
        // dynamically create rows in the table
        html += '<tr id="tr' + itemCount + '"><td><input class="input-medium" type="text" id="cont_no' + itemCount + '" name="cont_no' + itemCount + '" value=""></td></tr>';
    }
    $("#munna").html(html);
});

Answer 3

您必须在循环之外使用.html()而不是.append()。

$("#munna").html(html);

而不是

$("#munna").append(html);

Answer 4

$( "#cont_qty" ).change(function() 
{   
    var cont_qty = this.value;
    var html = '';
    for(var i=1 ; cont_qty>i; i++)
    {
    itemCount++;
    // dynamically create rows in the table
    html += '<tr id="tr'+itemCount+'"><td><input class="input-medium" type="text" id="cont_no'+itemCount+'" name="cont_no'+itemCount+'" value=""></td></tr>';     

    }
    $("#munna").html(html);
});

Answer 5

要防止它创建少于您想要的内容，请更改此项：

for(var i=1 ; cont_qty>i; i++)

到此：

for(var i=1 ; i<=cont_qty; i++)

并且，已经说过，因为您希望每次更改数字时重置字段数量，请将$("#munna").append(html);更改为$("#munna").html(html);

Answer 6

$( "#cont_qty" ).change(function() 
{   
    var cont_qty = this.value;
    for(var i=1 ; cont_qty>i; i++)
    {
    itemCount++;

    html += '<tr id="tr'+itemCount+'"><td><input class="input-medium" type="text" id="cont_no'+itemCount+'" name="cont_no'+itemCount+'" value=""></td></tr>';     
    }

    $("#munna").html(html)
});

除了使用'append'html div之外，.html可以重新加载div内容。

Answer 7

使用html（）

更改#munna的整个html内容

$( "#cont_qty" ).change(function() 
    {   
        var cont_qty = this.value;
        for(var i=1 ; cont_qty>i; i++)
        {
        itemCount++;
        // dynamically create rows in the table
           var auto_tr += '<tr id="tr'+itemCount+'"><td><input class="input-medium" type="text" id="cont_no'+itemCount+'" name="cont_no'+itemCount+'" value=""></td></tr>';      

        }
         $("#munna").html(auto_tr)
    });

如何使用输入字段动态添加和删除多个

7 个答案: