Question

我在json中有Table2个值。这会根据输入的数据带来值。数据格式如下。

"Table2":[{"SP_VENDOR_ID":94.0,"VENDORCODE":"V001","VENDORNAME":"Vendor 1","SP_VENDOR_START_DATE":"2017-12-04T00:00:00","SP_VENDOR_END_DATE":"2017-12-05T00:00:00"},{"SP_VENDOR_ID":95.0,"VENDORCODE":"V002","VENDORNAME":"Vendor 2","SP_VENDOR_START_DATE":"2017-12-06T00:00:00","SP_VENDOR_END_DATE":"2017-12-07T00:00:00"}],

现在我想填写以下HTML中的上述值

<div class="vendorDaterow">
    <div class="vendorName" id="dvVendorNameData1">
        <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" value="" name="nmVendorData" id="txtVendorName1" /></span>
    </div>
    <div class="vendorFromDate">
        <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate1"/><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </div>
    <div class="vendorToDate">
        <label>To Date</label><span class="datepicker"><input type="text" value="" name="spToDate" id="spToDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </div>
</div>

所以我尝试使用下面的代码，但没有正确地完成它。

var data = dataResponse;
var divData = $('.vendorDaterow');
$.each(data.Table2, function (i) {
    $.each(data.Table2[i], function (item, index) {
        if (item) {
            $(".vendorDaterow").append(divData);
            $(divData).addClass("vendorDaterow" + index);
            $(".vendorDaterow .vendorName:last").val(item.VENDORNAME);
            $(".vendorDaterow vendorFromDate:last").val(item.SP_VENDOR_START_DATE);
            $(".vendorDaterow .vendorToDate:last").val(item.SP_VENDOR_END_DATE);
        }

    });
});

请在此处说明错误以及如何动态设置

Answer 1

编写代码的方式将使用类重复写入所有元素.vendorDaterow

以下是一个可能解决方案的示例。避免在重复的模板中设置ID属性，因为ID应该是唯一的。

＆＃13;

var data = {"Table2":[{"SP_VENDOR_ID":94.0,"VENDORCODE":"V001","VENDORNAME":"Vendor 1","SP_VENDOR_START_DATE":"2017-12-04T00:00:00","SP_VENDOR_END_DATE":"2017-12-05T00:00:00"},{"SP_VENDOR_ID":95.0,"VENDORCODE":"V002","VENDORNAME":"Vendor 2","SP_VENDOR_START_DATE":"2017-12-06T00:00:00","SP_VENDOR_END_DATE":"2017-12-07T00:00:00"},{"SP_VENDOR_ID":95.0,"VENDORCODE":"V002","VENDORNAME":"Vendor 3","SP_VENDOR_START_DATE":"2017-12-06T00:00:00","SP_VENDOR_END_DATE":"2017-12-07T00:00:00"}]}

$(document).ready(function() {
  
  
  for(var i=1;i< data.Table2.length;i++){
    var newId = $(".vendorDaterow").length + 1
    var clonedHtml = $(".vendorDaterow:first").clone(true).addClass("vendorDaterow"+newId)
    clonedHtml.find(".vendorName input").prop("id","txtVendorName"+newId)
    clonedHtml.find(".vendorFromDate input").prop("id","spFromDate"+newId)
    clonedHtml.find(".vendorToDate input").prop("id","spToDate"+newId)
    $(".vendorDaterow:last").after(clonedHtml)
  }
   
  
  $.each(data.Table2, function(index, item) {
    $("#txtVendorName"+(index+1)).val(item.VENDORNAME);
    $("#spFromDate"+(index+1)).val(item.SP_VENDOR_START_DATE);
    $("#spToDate"+(index+1)).val(item.SP_VENDOR_END_DATE);
    
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <div class="vendorDaterow">
    <div class="vendorName" id="dvVendorNameData1">
      <label>SP Vender Name</label><span>@*Shri Kamalkanth Co.*@<input type="text" value="" name="nmVendorData" id="txtVendorName1"  /></span>
    </div>
    <div class="vendorFromDate">
      <label>From Date</label><span class="datepicker"><input type="text" value="" name="spFromDate" id="spFromDate1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </div>
    <div class="vendorToDate">
      <label>To Date</label><span class="datepicker"><input type="text" value=""  id="spToDate1" name="spToDate1"    /><i class="fa fa-calendar" aria-hidden="true"></i></span>
    </div>
  </div>

＆＃13;

Answer 2

如果您确定每个div中只有一个文本框，则直接定位输入元素。

   $(".vendorDaterow .vendorName input").val(item.VENDORNAME);
   $(".vendorDaterow .vendorFromDate input").val(item.SP_VENDOR_START_DATE);
   $(".vendorDaterow .vendorToDate input").val(item.SP_VENDOR_END_DATE);

在jquery中设置动态生成的输入文本的值

2 个答案: