Как добавить данные в таблицу, используя 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); 
      } 

Он успешно привязывает данные к таблице.

Но для более чем одной записи она получает только последнюю запись. (Переопределить)
Как я могу связать все строки с таблицей?

EDIT 1:

Я использовал .append(), но это дает мне как запись в один ряд .. как я могу отделить его в другой строке?

EDIT 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; 
      } 
     } 

Edit 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>'); 
     }); 
    } 
});