如何将代码输出的地址簿数据改为Table表格展示？

Hey there! Let's get that address book data into a proper HTML table—this is totally doable, and I’ll walk you through two solid approaches depending on your preference.

First, let’s assume your address book data is structured as an array of objects (if it’s not, you’ll want to reformat it into something like this first—it makes looping through entries way easier):

// Replace this with your actual address book data
const addressBookEntries = [
  { fullName: "Sam Wilson", phone: "555-111-2222", email: "sam.w@example.com" },
  { fullName: "Alex Reed", phone: "555-333-4444", email: "alex.r@example.com" },
  { fullName: "Taylor Lopez", phone: "555-555-6666", email: "taylor.l@example.com" }
];

Approach 1: DOM Manipulation (Recommended) #

This method is cleaner than document.write because it lets you control exactly where the table goes, and won’t accidentally overwrite your entire page if you run it after the page loads.

Here’s how to build the table step by step:

// Create the main table element and add styling (optional border for visibility)
const table = document.createElement("table");
table.style.borderCollapse = "collapse"; // Makes borders look cleaner
table.border = "1";

// Build the table header
const headerRow = document.createElement("tr");
["Full Name", "Phone Number", "Email"].forEach(headerText => {
  const th = document.createElement("th");
  th.textContent = headerText;
  th.style.padding = "8px";
  th.style.backgroundColor = "#f2f2f2";
  headerRow.appendChild(th);
});
table.appendChild(headerRow);

// Populate the table body with your data
const tbody = document.createElement("tbody");
addressBookEntries.forEach(entry => {
  const row = document.createElement("tr");
  
  // Create cells for each data field
  const nameCell = document.createElement("td");
  nameCell.textContent = entry.fullName;
  nameCell.style.padding = "8px";
  row.appendChild(nameCell);
  
  const phoneCell = document.createElement("td");
  phoneCell.textContent = entry.phone;
  phoneCell.style.padding = "8px";
  row.appendChild(phoneCell);
  
  const emailCell = document.createElement("td");
  emailCell.textContent = entry.email;
  emailCell.style.padding = "8px";
  row.appendChild(emailCell);
  
  tbody.appendChild(row);
});
table.appendChild(tbody);

// Add the table to your page (replace "body" with a specific container ID if needed)
document.body.appendChild(table);

Approach 2: Using document.write (Simpler, but Caveats) #

If you’re set on using document.write, this works too—just note that it should only be used while the page is loading (if you call it after the page is fully loaded, it will erase everything on the page).

// Start writing the table
document.write('<table border="1" style="border-collapse: collapse;">');

// Write the header row
document.write('<tr><th style="padding:8px; background:#f2f2f2;">Full Name</th><th style="padding:8px; background:#f2f2f2;">Phone Number</th><th style="padding:8px; background:#f2f2f2;">Email</th></tr>');

// Loop through your data and write each row
addressBookEntries.forEach(entry => {
  document.write(`<tr><td style="padding:8px;">${entry.fullName}</td><td style="padding:8px;">${entry.phone}</td><td style="padding:8px;">${entry.email}</td></tr>`);
});

// Close the table
document.write('</table>');

Key Notes to Adapt This to Your Code: #

• Replace the sample addressBookEntries array with your actual data source (if your data is stored in variables or pulled from somewhere else, map it into this object structure first).
• If your original address book code uses a loop to print each entry as paragraphs/divs, delete that loop and replace it with either of the above table-building snippets.
• For better control, add a container div in your HTML (like <div id="addressTable"></div>) and append the table to that instead of document.body—just replace document.body.appendChild(table) with document.getElementById("addressTable").appendChild(table).

内容的提问来源于stack exchange，提问作者Sam