JSON 对象和 HTML 表

JSON objects and HTML tables

本文关键字：HTML 对象 JSON      更新时间：2023-09-26

第一次海报，也是 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"
   }
]

我需要的是能够遍历它以为每个员工添加每个表行。有五个值：姓名、电子邮件地址、职务、专业知识、电话号码

这就是我到目前为止所拥有的...

$(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//

任何帮助将不胜感激！

编辑：另外，我将如何使电子邮件地址"可点击"/"邮寄到"地址？

一个简单的循环就可以了，你还应该构建整个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);

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

例如，为了循环它们，你可以只做普通的Javascript循环：

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

然后，为了访问员工的信息，您只需执行employee.Name即可访问其姓名，employee.Title标题等。

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

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

然后最后用$("#pager").append(str);附加它.

'Welcome to Stackoverflow 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);
});

你正在使用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);
});
相关文章：