如何通过循环在div标记内动态添加文本框

时间:2017-02-16 11:47:02

标签: javascript jquery html css

我想将来自ajax调用中的success函数的数据(var data)动态添加到文本框中,就像下面给出的代码一样。我需要在div标签中添加每个文本框。告诉我在for循环的div标签中添加每个文本框的方法。

 $.ajax({
    type: 'POST',
    url: 'GRNgetItem.php',
    data: postForm1,
    //dataType: 'json',
    success: function (data) {
       var container = document.getElementById('item');
       // var container = document.getElementById('item_Name');
       var dd = data;
       var data = (typeof dd) == 'string' ? eval('(' + dd + ')') : dd;
       for (var i = 0; i < data.length; i++) {
          var txtItemId = document.createElement('input');
          txtItemId.type = 'text';
          txtItemId.id = 'ItemId_' + i; // Set id based on "i" value
          txtItemId.name='ItemId[]';
          txtItemId.class='col-md-2';
          txtItemId.value=data[i].ItemId;
          container.appendChild(txtItemId);        
          var txtItemName = document.createElement('input');
          txtItemName.type = 'text';
          txtItemName.id = 'ItemName_' + i; // Set id based on "i" value
          txtItemId.name='ItemName[]';
          txtItemName.class='col-md-2';
          txtItemName.value=data[i].ItemName;
          container.appendChild(txtItemName);    
          var txtItemQty = document.createElement('input');
          txtItemQty.type = 'text';
          txtItemQty.id = 'ItemQty_' + i; // Set id based on "i" value
          txtItemId.name='ItemQty[]';
          txtItemQty.class='col-md-2';
          txtItemQty.value=data[i].Qty;
          container.appendChild(txtItemQty);
          var txtItemRPrice= document.createElement('input');
          txtItemRPrice.type = 'text';
          txtItemRPrice.id = 'ItemPrice_' + i; // Set id based on "i" value
          txtItemId.name='ItemPrice[]';
          txtItemRPrice.class='col-md-2';
          txtItemRPrice.value="";
          container.appendChild(txtItemRPrice);  
       }    
    }
});

1 个答案:

答案 0 :(得分:0)

尝试使用此Javascript

var container = document.getElementById('item');
var div = document.createElement('div');
var txtItemId = document.createElement('input');
txtItemId.type = 'text';
txtItemId.id = 'ItemId_' ; 
txtItemId.name='ItemId[]';
txtItemId.class='col-md-2';
txtItemId.value=1;
div.appendChild(txtItemId);

console.log(container.appendChild(div))

这会在textbox标记内显示DIV。相应地更改其他脚本