如何用纯JavaScript动态生成HTML表格并按需显示CODE字段

Alright, let's sort out your table generation issue. Your current code is creating multiple separate tables, hardcoding values instead of looping through your dataset, and missing the toggle functionality for the CODE column. Here's a polished, working solution that checks all your boxes:

Full Working Code #

HTML (Only Empty Container) #

<div id="challenge_container_1"></div>

JavaScript (All Content Generated Here) #

// Your dataset
var challenge_data = [];
challenge_data[0] = ["CODE 1", "DESCRIPTION 1", "13256.45"];
challenge_data[1] = ["CODE 2", "DESCRIPTION 2", "244.78"];
challenge_data[2] = ["CODE 3", "DESCRIPTION 3", "1867.44"];
challenge_data[3] = ["CODE 4", "DESCRIPTION 4", "1455.55"];

document.addEventListener("DOMContentLoaded", function() {
  const container = document.getElementById("challenge_container_1");

  // Create toggle button (100% JS-generated)
  const toggleBtn = document.createElement("button");
  toggleBtn.textContent = "Show CODE Column";
  toggleBtn.classList.add("toggle-btn");
  container.appendChild(toggleBtn);

  // Create main table element
  const table = document.createElement("table");
  table.classList.add("data-table");

  // Build table header
  const thead = document.createElement("thead");
  const headerRow = document.createElement("tr");

  // CODE header (hidden by default)
  const codeHeader = document.createElement("th");
  codeHeader.textContent = "CODE";
  codeHeader.classList.add("code-column", "hidden");
  headerRow.appendChild(codeHeader);

  // Description header
  const descHeader = document.createElement("th");
  descHeader.textContent = "Description";
  headerRow.appendChild(descHeader);

  // Amount header
  const amountHeader = document.createElement("th");
  amountHeader.textContent = "Amount";
  headerRow.appendChild(amountHeader);

  thead.appendChild(headerRow);
  table.appendChild(thead);

  // Build table body with dynamic rows
  const tbody = document.createElement("tbody");
  challenge_data.forEach(item => {
    const row = document.createElement("tr");

    // CODE cell (hidden by default)
    const codeCell = document.createElement("td");
    codeCell.textContent = item[0];
    codeCell.classList.add("code-column", "hidden");
    row.appendChild(codeCell);

    // Description cell
    const descCell = document.createElement("td");
    descCell.textContent = item[1];
    row.appendChild(descCell);

    // Amount cell
    const amountCell = document.createElement("td");
    amountCell.textContent = item[2];
    row.appendChild(amountCell);

    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  container.appendChild(table);

  // Add inline styles via JS (ensures no external CSS dependencies)
  const style = document.createElement("style");
  style.textContent = `
    .data-table { border-collapse: collapse; width: 100%; margin-top: 10px; }
    .data-table th, .data-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    .data-table th { background-color: #f2f2f2; }
    .hidden { display: none; }
    .toggle-btn { padding: 8px 16px; cursor: pointer; }
  `;
  document.head.appendChild(style);

  // Toggle CODE column visibility on button click
  toggleBtn.addEventListener("click", function() {
    const codeElements = document.querySelectorAll(".code-column");
    codeElements.forEach(el => el.classList.toggle("hidden"));
    this.textContent = this.textContent === "Show CODE Column" ? "Hide CODE Column" : "Show CODE Column";
  });
});

Key Improvements Over Your Original Code #

• Single Semantic Table: Replaced multiple separate tables with one proper table using <thead> and <tbody> for better structure and accessibility.
• Dynamic Data Binding: Uses forEach to loop through your challenge_data array, so the table will automatically update if you add more items later—no hardcoding needed.
• Toggleable CODE Column: The button (generated entirely via JS) toggles the hidden class on all CODE-related elements, switching between show/hide states.
• 100% JS-Generated Content: Every element in the target DIV (button, table, cells, even styles) is created programmatically, meeting your requirement of no pre-existing content in the DIV.
• Clean, Maintainable Code: Removed redundant element creation and simplified logic to make the code easier to read and modify.

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