Question

我尝试使用JQuery .append 方法使用Javascript函数创建HTML表。我的问题是，当第一次在HTML表中添加数据时，{strong> undefined 的数据是StockNo，ShortName，UOM和Balance。

当我在Javascript中跟踪或在GenerateTable函数中发出警报时，可以。我不知道该怎么解决。请直接向我展示！！！

可见

<div class="col-md-4">
     @Html.DropDownListFor(model => model.Stock,
     new SelectList(ViewBag.StockVMs, "ID", "Name"), "--Select Stock--",
     new
         {
            @class = " form-control input-ms",
            id = "ddlStock",
            @required = "required"
         })
</div>

<div class="col-md-4">
     <input type="number" placeholder="0" class="form-control input-sm" id="txtPrice" name="Price" onchange="calAmount()" required />
</div>
<div class="col-md-4">
     <input type="number" placeholder="0" class="form-control input-sm" id="txtQuantity" name="Quantity" onchange="calAmount()" required />
</div>

<input type="button" class="btn btn-primary" id="btnAdd" value="Add" onclick="Add()"/>
<tbody id="tblPurchaseItem"></tbody>

在javascript文件中

function Add () {
    BindItemEntity();    
    GenerateTable();
};

function BindItemEntity() {   
    PurchaseItemEntity = {};
    var ID = $('#ddlStock').val();
    $.ajax({
        type: 'GET',
        url: "/PurchaseOrder/Stock?id="+ ID,
        success: function (data) {
            PurchaseItemEntity.StockNo = data.StockNo;
            PurchaseItemEntity.ShortName = data.ShortName;
            PurchaseItemEntity.UOM = data.UOM;
            PurchaseItemEntity.Balance = 1;
        }
    });
    PurchaseItemEntity.PurchaseItemID = Id;
    PurchaseItemEntity.StockID = $('#ddlStock').val();
    PurchaseItemEntity.Price = $('#txtPrice').val();
    PurchaseItemEntity.Quantity = $('#txtQuantity').val();
    PurchaseItemEntity.Amount = $('#hidAmount').val();
    PurchaseItemCollection.push(PurchaseItemEntity);
    Id = Id + 1;
}

function GenerateTable() {
    console.log(PurchaseItemCollection)
    TotalAmount = 0;
    if (PurchaseItemCollection.length > 0) {
        var amount;
        $('#tblPurchaseItem').empty();
        $.each(PurchaseItemCollection, function (index, value) { 
            //alert("Hi");
            $('#tblPurchaseItem').append(
            '<tr>' +
                      '<td><p style="font-size:small;">' + value.PurchaseItemID + '</p></td>' +
                      '<td><p style="font-size:small;">' + value.StockNo + '</p></td>' +
                      '<td><p style="font-size:small;">' + value.ShortName + '</p></td>' +
                      '<td><p style="font-size:small;">' + value.UOM + '</p></td>' +
                      '<td><p style="font-size:small;">' + value.Balance + '</p></td>' +
                      '<td style="text-align:right;">' + parseFloat(value.Price) + '</td>' +
                      '<td style="text-align:right;">' + value.Quantity + '</td>' +
                      '<td style="text-align:right;">' + parseFloat(value.Amount) + '</td>' +
                     '<td><div class="btn-group"><input type="button" id="tblBtnEdit" data-Id="' + value.PurchaseItemID + '" class="btn btn-xs btn-primary" value="Edit" /><input type="button" data-Id="' + value.PurchaseItemID + '" class="btn btn-xs btn-danger" id="tblBtnDelete" value="Delete"  /></div></td>' +
                      '</tr>');
        });
    }
    else {
        $('#tblPurchaseItem').empty();
    }
}

在控制器中

 public ActionResult Stock(string id)
        {
            var data = db.StockDMs.Find(id);
            return Json(data, JsonRequestBehavior.AllowGet);
        }

Answer 1

在ajax调用中使用false异步：

function BindItemEntity() {   
    PurchaseItemEntity = {};
    var ID = $('#ddlStock').val();
    $.ajax({
        type: 'GET',
        async:false, /* here */
        url: "/PurchaseOrder/Stock?id="+ ID,
        success: function (data) {
            PurchaseItemEntity.StockNo = data.StockNo;
            PurchaseItemEntity.ShortName = data.ShortName;
            PurchaseItemEntity.UOM = data.UOM;
            PurchaseItemEntity.Balance = 1;
        }
    });
    PurchaseItemEntity.PurchaseItemID = Id;
    PurchaseItemEntity.StockID = $('#ddlStock').val();
    PurchaseItemEntity.Price = $('#txtPrice').val();
    PurchaseItemEntity.Quantity = $('#txtQuantity').val();
    PurchaseItemEntity.Amount = $('#hidAmount').val();
    PurchaseItemCollection.push(PurchaseItemEntity);
    Id = Id + 1;
}

Answer 2

您可以使用datatables，它是JQ用来渲染表的库。他们有一个基于ajax的表，您可以在其中插入成功函数内的值，而无需附加数据。您也可以应用排序，搜索和过滤器。看一看， https://datatables.net/examples/data_sources/ajax.html

使用JQuery将数据动态转换为HTML表

2 个答案: