使用Javascript在對象數組中創建HTML表格

我正在從javascript調用Web方法。 web方法從northwind數據庫返回一個客戶數組。我從工作的例子是在這裏：Calling Web Services with ASP.NET AJAX 使用Javascript在對象數組中創建HTML表格

我不知道如何寫這個JavaScript方法：CreateCustomersTable

這將創建HTML表來顯示返回的數據。任何幫助，將不勝感激。

我的JavaScript

function GetCustomerByCountry() { 
    var country = $get("txtCountry").value; 
    AjaxWebService.GetCustomersByCountry(country, OnWSRequestComplete, OnWSRequestFailed); 
} 
function OnWSRequestComplete(results) { 
    if (results != null) { 
     CreateCustomersTable(results); 
     //GetMap(results); 
    } 
} 
function CreateCustomersTable(result) { 
    alert(result); 
if (document.all) //Filter for IE DOM since other browsers are limited 
{ 
    // How do I do this? 
    } 
} 
else { 
$get("divOutput").innerHTML = "RSS only available in IE5+"; } 
}

我的Web方法

[WebMethod] 
    public Customer[] GetCustomersByCountry(string country) 
    { 
     NorthwindDALTableAdapters.CustomersTableAdapter adap = 
      new NorthwindDALTableAdapters.CustomersTableAdapter(); 
     NorthwindDAL.CustomersDataTable dt = adap.GetCustomersByCountry(country); 

     if (dt.Rows.Count <= 0) 
     { 
      return null; 
     } 

     Customer[] customers = new Customer[dt.Rows.Count]; 
     for (int i = 0; i < dt.Rows.Count; i++) 
     { 
      NorthwindDAL.CustomersRow row = (NorthwindDAL.CustomersRow)dt.Rows[i]; 
      customers[i] = new Customer(); 
      customers[i].CustomerId = row.CustomerID; 
      customers[i].Name = row.ContactName; 
     } 
     return customers; 
    }

來源

2009-01-28 Picflight

如果您提供「results」的確切數據格式，這將會容易得多 – Triptych 2009-01-28 21:56:07

我認爲Web Method將成爲結果的來源，Customer對象數組。這是什麼意思的確切數據格式？ – Picflight 2009-01-28 23:29:51

嘗試查看調試模式下的結果變量值是什麼。如果結構似乎比我想象的結構，這樣的事情可能工作：

function CreateCustomersTable(result) { 
    var str = '<table>'; 
    str += '<tr><th>Id</th><th>Name</th></tr>'; 
    for (var i=0; i< result.length; i++){ 
     str += '<tr><td>' + result[i].CustomerId + '</td><td>' + result[i].Name + '</td></tr>'; 
    } 
    str += '</table>'; 
    return str;  
}

，然後你可以做somethig這樣的：

var existingDiv = document.getElementById('Id of an existing Div'); 
existingDiv.innerHTML = CreateCustomersTable(result);

我希望這可以幫助您。

來源

2009-01-28 22:16:51 Matias

你應該通過數組作爲JSON或XML，而不是隻是它的的toString（）值的（除非offcourse是收益或者JSON OR XML）。請注意，JSOn對於JavaScript來說更好，因爲它是一種JavaScript本地格式。
另外，那個告訴你IE瀏覽器不能執行DOM操作的人應該可以向他/她做出可怕的事情。

如果您的格式是JSON，您可以對它們進行循環並創建元素並打印它們。（一旦你找出了你的服務返回的格式，我們可以幫助你更好。）

來源

2009-01-28 21:58:51

我如何知道返回的結果是否是JSON？ – Picflight 2009-01-28 23:24:15

就像這樣，假設你在「結果」值中返回了JSON。「容器」是一個ID爲「容器」的div。我克隆節點來節省內存，但如果你想分配一些基類到「基」元素。

var table = document.createElement('table'); 
var baseRow = document.createElement('tr'); 
var baseCell = document.createElement('td'); 
var container = document.getElementById('container'); 

for(var i = 0; i < results.length; i++){ 
    //Create a new row 
    var myRow = baseRow.cloneNode(false); 

    //Create a new cell, you could loop this for multiple cells 
    var myCell = baseCell.cloneNode(false); 
    myCell.innerHTML = result.value; 

    //Append new cell 
    myRow.appendChild(myCell); 

    //Append new row 
    table.appendChild(myRow); 
} 

container.appendChild(table);

來源

2009-01-28 22:05:59

使用Javascript在對象數組中創建HTML表格

回答

相關問題