JSON 个对象和 HTML 个表格

Question

这里是第一次发帖，JavaScript...

下面是我的JSON对象...

[  
   {  
      "Name":"Ted",
      "EmailAddress":"ted@ted.edu",
      "Title":"Director",
      "Expertise":"Statistics",
      "PhoneNumber":"444-444-4444"
   },
   {  
      "Name":"Ann",
      "EmailAddress":"ann@ann.edu",
      "Title":"Director",
      "Expertise":"Physics",
      "PhoneNumber":"444-444-5555"
   }
]

我需要的是能够循环通过它为每个员工添加每个 table 行。有五个值：Name、EmailAddress、Title、Expertise、PhoneNumber

这是我目前所拥有的...

$(function () {
var Employees= [{"Name":"Ted","EmailAddress":"ted@ted.edu","Title":"Director","Expertise":"Statistics","PhoneNumber":"444-444-4444"}, {"Name":"Ann","EmailAddress":"ann@ann.edu","Title":"Director","Expertise":"Physics","PhoneNumber":"444-444-5555"}];

$("#pager").append("<table id='employeelist' class='table'><table>");

//for loop goes here//

如有任何帮助，我们将不胜感激！

编辑：另外，我如何将电子邮件地址设为 'clickable'/'mail to' 地址？

Answer 1

一个简单的循环即可，您还应该构建整个 HTML 字符串，然后附加：

var table = "<table id='employeelist' class='table'>";
for (var i = 0; i < Employees.length; i++) {
    //Create the table row
    table += "<tr>";

    //Create table cells
    table += "<td>" + Employees[i].Name + "</td>";
    table += "<td>" + Employees[i].EmailAddress + "</td>";
    table += "<td>" + Employees[i].Title + "</td>";
    table += "<td>" + Employees[i].Expertise + "</td>";
    table += "<td>" + Employees[i].PhoneNumber + "</td>";

    //Close table row
    table += "</tr>";
}
table += "</table>";
$("#pager").append(table);

Answer 2

由于 JSON 对象只是普通的 Javascript 对象，您可以这样对待它们。

例如，为了循环遍历它们，您可以执行正常的 Javascript 循环：

for(var i = 0; i < Employees.length; i++) {
    var employee = Employees[i];
}

然后，为了访问员工的信息，您只需 employee.Name 访问其姓名，employee.Title 访问职位等。

使用 employee.Name 和其他信息中的信息，您可以使用该信息简单地构建您的字符串：

str += '<td>' + employee.Name + ...

最后加上 $("#pager").append(str);.

Answer 3

'Welcome to Whosebug and javascript :)'

它实际上是一个 javascript 对象（不是 JSON 对象）。

$(function() {
  var Employees = [{
    "Name": "Ted",
    "EmailAddress": "ted@ted.edu",
    "Title": "Director",
    "Expertise": "Statistics",
    "PhoneNumber": "444-444-4444"
  }, {
    "Name": "Ann",
    "EmailAddress": "ann@ann.edu",
    "Title": "Director",
    "Expertise": "Physics",
    "PhoneNumber": "444-444-5555"
  }];

  var table = '<table id="employeelist" class="table">';
  for (var i = 0, j = Employees.length; i < j; i++) {
    table += '<tr>';
    table += '<td>' + Employees[i].Name + '</td>';
    table += '<td>' + Employees[i].EmailAddress + '</td>';
    table += '<td>' + Employees[i].Title + '</td>';
    table += '<td>' + Employees[i].Expertise + '</td>';
    table += '<td>' + Employees[i].PhoneNumber + '</td>';
    table += '</tr>';

  }
  table += '</table>';

  $("#pager").append(table);
});

Answer 4

您正在使用 jQuery。那么它应该是这样的：

var table=$("<table>",{
   id:"employeelist"
}).addClass("table");
table.appendTo($("#pager"));
$("#pager").append(table);
$.each(Employees, function(index, employee){
    var row=$("<tr>",{});
    $("<td>",{
         html:employee.name
    }).appendTo(row);

 $("<td>",{
         html:employee.EmailAddress
 }).appendTo(row);
 $("<td>",{
         html:employee.Title
 }).appendTo(row);
 $("<td>",{
         html:employee.Expertise
 }).appendTo(row);
 $("<td>",{
         html:employee.PhoneNumber
 }).appendTo(row);
 row.appendTo(table);
});

JSON 个对象和 HTML 个表格

JSON objects and HTML tables

javascript

json

for-loop