在线餐厅网站开发求助：菜单切换、订单留存及移除功能修复

Since you're new to web development, I'll keep the explanations straightforward and give you actionable code snippets where helpful.

1. Updating menu table content when clicking topnav links (with fixed action buttons in last column) #

The key here is to avoid full page reloads and dynamically update the table content. Here's how to do it:

• First, add a data-category attribute to each topnav link to identify which menu set to load, like:

  <div class="topnav">
    <a href="#" data-category="appetizers">Appetizers</a>
    <a href="#" data-category="mains">Main Dishes</a>
  </div>
  <table id="menu-table">
    <thead>
      <tr><th>Item</th><th>Price</th><th>Actions</th></tr>
    </thead>
    <tbody id="menu-body"></tbody>
  </table>
  

• Next, create a JavaScript function to generate table rows. For each menu item, build a row and append a fixed action button column at the end:

  // Sample menu data (you can fetch this from a server too)
  const menuData = {
    appetizers: [{name: "Garlic Bread", price: "$5"}, {name: "Calamari", price: "$8"}],
    mains: [{name: "Grilled Chicken", price: "$12"}, {name: "Pasta Carbonara", price: "$10"}]
  };
  
  // Listen for topnav clicks
  document.querySelectorAll('.topnav a').forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault(); // Stop default link behavior
      const category = link.dataset.category;
      const menuBody = document.getElementById('menu-body');
      menuBody.innerHTML = ''; // Clear old content
  
      // Add new rows
      menuData[category].forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${item.name}</td>
          <td>${item.price}</td>
          <td><button class="add-to-order">Add to Order</button></td>
        `;
        menuBody.appendChild(row);
      });
    });
  });
  

This way, no matter how many rows the new table has, the last column will always have your action button.

2. Persisting the #order div content across page jumps and refreshes #

To keep your order content even when navigating or refreshing, use localStorage (it stays saved even after closing the browser) or sessionStorage (only lasts until the tab is closed). Here's a simple implementation:

• Save the order whenever it changes:

  function saveOrder() {
    const orderDiv = document.getElementById('order');
    localStorage.setItem('savedOrder', orderDiv.innerHTML);
  }
  // Call this function whenever you update the order (e.g., after adding/removing items)
  

• Restore the order when the page loads:

  document.addEventListener('DOMContentLoaded', () => {
    const savedOrder = localStorage.getItem('savedOrder');
    const orderDiv = document.getElementById('order');
    if (savedOrder) {
      orderDiv.innerHTML = savedOrder;
    }
  });
  

If you're navigating between different pages (not a single-page app), make sure every page that has the #order div includes this restore code. For better maintainability, you could save the order data as a JSON object instead of raw HTML, then rebuild the order UI from the data—this makes it easier to edit or update items later.

3. Fixing the Remove button not disappearing after clearing order details #

The problem here is duplicate IDs—HTML only allows one element with a specific ID on a page. When you generate multiple Remove buttons with the same ID, your JavaScript can't target the correct one properly. Here's how to fix it:

• Use a class instead of an ID for your Remove buttons, like class="remove-btn".
• When creating the button, bind a click event that removes both the order details and the button itself:

  function addItemToOrder(itemName, itemPrice) {
    const orderDiv = document.getElementById('order');
    // Create order item container
    const orderItem = document.createElement('div');
    orderItem.className = 'order-item';
    orderItem.innerHTML = `
      <p>${itemName} - ${itemPrice}</p>
      <button class="remove-btn">Remove</button>
    `;
    orderDiv.appendChild(orderItem);
  
    // Add click event to the Remove button
    const removeBtn = orderItem.querySelector('.remove-btn');
    removeBtn.addEventListener('click', () => {
      orderItem.remove(); // Remove the entire order item (details + button)
      saveOrder(); // Don't forget to update the saved order!
    });
  }
  

If you were using event delegation (listening for clicks on a parent element), you could target the .remove-btn class there instead:

document.getElementById('order').addEventListener('click', (e) => {
  if (e.target.classList.contains('remove-btn')) {
    e.target.closest('.order-item').remove();
    saveOrder();
  }
});

This ensures that every Remove button targets its own order item, and both the details and button are removed when clicked.

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