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

How to dynamically Add and Remove multiple <tr> with input fields

本文关键字：tr 删除 输入 何使用 字段 动态 添加      更新时间：2023-09-26

我想做的是当用户自动键入数字数量时，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，则如果用户更改值并键入 7，则它现在创建 4，则必须删除之前创建的那些 4，然后必须创建 6

现在我不知道如何删除

循环前为空，从零开始

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

使用 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);
});

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

要防止它创建比您想要的少一个，请更改以下内容：

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

对此：

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

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

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

除了使用"附加"htmldiv之外，.html还可以重新加载div内容。

用 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)
    });
你必须

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

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

而不是

$("#munna").append(html);
相关文章：