如何动态添加和删除多个 <tr> 带输入字段

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（）而不是append（）

$("#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)
});

除了使用“附加” 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)
    });