在Javascript中用对象数组创建HTML表

I am calling a web Method from javascript. The web method returns an array of customers from the northwind database. The example I am working from is here: Calling Web Services with ASP.NET AJAX

我从javascript调用web方法。 Web方法从northwind数据库返回一组客户。我正在使用的示例是:使用ASP.NET AJAX调用Web服务

I dont know how to write this javascript method: CreateCustomersTable

我不知道如何编写这个javascript方法:CreateCustomersTable

This would create the html table to display the data being returned. Any help would be appreciated.

这将创建html表以显示返回的数据。任何帮助,将不胜感激。

My 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+"; }
}

My web Method

我的网络方法

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

3 个解决方案

#1

Try to look what is the result variable value in debug mode. If the structure seems the structure that i'm imagining, something like this could work:

尝试查看调试模式下的结果变量值。如果结构看起来像我想象的结构,这样的东西可以工作:

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

And then You can do somethig like this:

然后你可以像这样做一些事情:

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

I wish this help you.

我希望这能帮助你。

#2

Something like this, assuming you have JSON returned in the "result" value. The "container" is a div with id of "container". I'm cloning nodes to save memory, but also if you wanted to assign some base classes to the "base" elements.

假设您在“结果”值中返回了JSON,这样的事情就是这样的。 “容器”是id为“容器”的div。我正在克隆节点以节省内存,但是如果你想为“base”元素分配一些基类。

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);

#3

You should pass the array as JSON or XML instead of just the toString() value of it (unless that offcourse is returns either JSON oR XML). Note that JSOn is better for javascript since it is a javascript native format.
Also the person who told you that browser other then IE can not do DOM manipulation should propably have done horrible things to him/her.

您应该将数组作为JSON或XML传递,而不仅仅是它的toString()值(除非该offcourse返回JSON或XML)。请注意,JSOn更适合javascript,因为它是javascript原生格式。那个告诉你除了IE以外的浏览器不能做DOM操作的人应该对他/她做了可怕的事情。

If your format is JSON you can just for-loop them and create the elements and print them. (once you figured out what format your service returns we can help you better.)

如果您的格式是JSON,您可以只是循环它们并创建元素并打印它们。 (一旦你弄清楚你的服务返回什么格式,我们可以帮助你更好。)

#1