如何使用jquery将数据附加到表中

Question

我有一个 HTML 表格：

<table id="tableOrderDetail" class="table-striped table-bordered" style="align: center; width: 100%;">
<thead>
  <tr>
    <th width="5%">Sr. No.</th>
    <th width="25%">Product Name</th>
    <th width="12%" class="center">No Of Carton</th>
    <th width="12%" class="center">Quantity</th>
    <th width="12%" class="center">Original Price</th>
    <th width="12%" class="center">Order Price</th>
    <th width="10%" class="center">Discount</th>
    <th width="12%" class="center">Total Price</th>
  </tr>
</thead>
  <tbody>
    <tr>
    <td width="25%" class="ProductName"></td>
    <td width="12%" class="NoOfCarton"></td>
    <td width="12%" class="ProductQuantity"></td>
    <td width="12%" class="OriginalPrice"></td>
    <td width="12%" class="OrderPrice"></td>
    <td width="10%" class="Discount"></td>
    <td width="12%" class="TotalPrice"></td>
</tr>
</tbody> 

现在我必须将所有数据附加到表中，我尝试如下：

            $.ajax({
                type: "POST",
                url: "../handlers/DisplaySpecificOrderDetail.ashx?OrderId=" + Orderid, //+ "tk=" + Date.toLocaleTimeString()
                data: "{ OrderId: " + Orderid + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: "true",
                cache: "false",
                success: function (data) {

                    $("#tableOrderDetail tbody").find("tr:gt(0)").remove();

                    $.each(data, function (i, v) {
                        if (i == 0) {
                            //setting the data in first row itself
                            setDataOnRow($("#tableOrderDetail tbody").find("tr").first(), v);
                        } else {
                            //clonning the first row and setting data over it and then appending in tbody
                            var clonnedRow = $($("#tableOrderDetail tbody").find("tr").first()).clone();
                            setDataOnRow(clonnedRow, v);
                            $("#tableOrderDetail tbody").append(clonnedRow);
                        }
                     });         
                   }); 

function setDataOnRow(rowObject, v) {
               // debugger
                $(rowObject).find(".ProductName").html(v.ProductName);
                $(rowObject).find(".NoOfCarton").html(v.NoOfCarton);
                $(rowObject).find(".ProductQuantity").html(v.ProductQuantity);
                $(rowObject).find(".OriginalPrice").html(v.OriginalPrice);
                $(rowObject).find(".OrderPrice").html(v.OrderPrice);
                $(rowObject).find(".Discount").html(v.Discount);
                $(rowObject).find(".TotalPrice").html(v.TotalPrice);
            }

已成功将数据绑定到表中。

但是对于不止一条记录，它只获得最后一条记录。（覆盖）
如何将所有行与表绑定？

编辑 1：

我使用了.append()，但它给了我一行记录..我怎样才能将它分开在不同的行中？

编辑 2：这是我的处理程序：

public void ProcessRequest(HttpContext context)
    {
        try
        {
            context.Response.ContentType = "application/octet-stream";

            long OrderId;
            Result res = new Result();    
            long.TryParse(context.Request.QueryString["OrderId"].ToString(), out OrderId);

            JavaScriptSerializer TheSerializer = new JavaScriptSerializer();

            SpecificOrderDetailManagement specificordMgr = new SpecificOrderDetailManagement();

                res = specificordMgr.GetOrderDetailOrderID(OrderId);
                context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(res.ListObject));
            }
            catch (Exception ex)
            {
                throw ex;
            }
        } 

编辑 3：屏幕

Answer 1

您可以动态地 clone tbody 中存在的第一行，然后 append 将其返回到表中，其中包含更新的行数据，如下所示：

$(document).ready(function() {
  var testData = [{
    "ProductName": "AAA",
    "NoOfCarton": 10
  }, {
    "ProductName": "BBB",
    "NoOfCarton": 20
  }];

  $("#tableOrderDetail tbody").find("tr:gt(0)").remove(); //remove all old rows except first one

  $.each(testData, function(i, v) {

    if (i == 0) {
      //setting the data in first row itself
      setDataOnRow($("#tableOrderDetail tbody").find("tr").first(), v);

    } else {

      //clonning the first row and setting data over it and then appending in tbody
      var clonnedRow = $($("#tableOrderDetail tbody").find("tr").first()).clone();
      setDataOnRow(clonnedRow, v);

      $("#tableOrderDetail tbody").append(clonnedRow);

    }
  });

});

//set the data in row
function setDataOnRow(rowObject, v) {
  var test = v.ProductName;
  var NoOfCarton = v.NoOfCarton;
  $(rowObject).find(".ProductName").html(test);
  $(rowObject).find(".NoOfCarton").html(NoOfCarton);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="tableOrderDetail" class="table-striped table-bordered" style="align: center; width: 100%;">
  <thead>
    <tr>
      <th width="25%">Product Name</th>
      <th width="12%" class="center">No Of Carton</th>
    </tr>
  </thead>
  <tbody>
    <tr class="">
      <td width="25%" class="ProductName">test</td>
      <td width="12%" class="NoOfCarton">test</td>
    </tr>
  </tbody>

注意：为简单起见，我只显示 2 列。请根据您的列数进行修改。

Answer 2

试试这个 -

在您的代码中，您没有创建任何 <tr> 或 <td> 元素，您只是替换现有元素的 html 内容。

在tbody之后为ajax接收的每组数据追加表格行。

$.ajax({
    type: "POST",
    url: "../handlers/DisplaySpecificOrderDetail.ashx?OrderId=" + Orderid, //+ "tk=" + Date.toLocaleTimeString()
    data: "{ OrderId: " + Orderid + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: "true",
    cache: "false",
    success: function(data) {
        $.each(data, function(i, v) {
            $('#tableOrderDetail').find('tbody')
                .append('<tr>').append('<td width="25%" class="ProductName">' + v.ProductName + '</td>')
                .append('<td width="25%" class="NoOfCarton">' + v.NoOfCarton + '</td>')
                .append('<td width="25%" class="ProductQuantity">' + v.ProductQuantity + '</td>')
                .append('<td width="25%" class="OriginalPrice">' + v.OriginalPrice + '</td>')
                .append('<td width="25%" class="OrderPrice">' + v.OrderPrice + '</td>')
                .append('<td width="25%" class="Discount">' + v.Discount + '</td>')
                .append('<td width="25%" class="TotalPrice">' + v.TotalPrice + '</td>')
                .append('<tr>');
        });
    }
});