jQuery动态表格与PDF导出问题：选项切换旧内容未清除修复

Hey there! Let's fix those two issues you're facing with your tool—clearing old table content when switching options and eliminating duplicate tables in the PDF export.

1. Clearing Old Table Rows When Changing Brand/Printer #

Right now, you're appending new rows to the table without removing existing ones first, which is why old content lingers. Here's how to fix this:

• Add a clear step before rendering new data: In the function where you generate table rows, insert this line right before looping through your consumable data:

  $('#耗材表格 tbody').empty();
  

  This wipes out all existing rows from the table body, so new data gets added to a blank slate.

• Apply this to both dropdown change handlers: Ensure this clear happens whenever the user selects a new brand or printer. For example, in your printer dropdown's change event:

  $('#printerSelect').on('change', function() {
    // First, clear the old table content
    $('#耗材表格 tbody').empty();
    // Then run your existing code to fetch and render new consumable data
    // ... rest of your code here ...
  });
  

  Repeat this in the brand dropdown's change handler so every option switch triggers a fresh table.

2. Fixing Duplicate Tables in jsPDF Export #

Duplicate tables in the PDF usually stem from either unresolved duplicate rows in the table (fixed in step 1) or the export code running multiple times unintentionally. Here's how to address both scenarios:

If duplicates persist after clearing the table: #

Check if you're attaching the export button's click event multiple times (e.g., inside a change handler that runs on every dropdown update). This causes listeners to stack up, so clicking the button runs the export function several times. Fix it by removing old listeners before adding a new one:

// Instead of just $('#exportBtn').on('click', exportToPDF);
$('#exportBtn').off('click').on('click', exportToPDF);

Ensure you capture only the current table content: #

When generating the PDF, make sure you're grabbing the latest, clean table HTML. Modify your export function like this:

function exportToPDF() {
  const doc = new jsPDF();
  
  // Capture the current table's HTML
  const tableElement = document.getElementById('耗材表格');
  
  // Add the table to the PDF once
  doc.autoTable({
    html: tableElement,
    startY: 20 // Adjust this for your layout needs
  });
  
  doc.save('耗材清单.pdf');
}

Quick Test Tips #

• After adding the table clear, switch between brands/printers to confirm old rows disappear immediately.
• Test the PDF export right after—if duplicates are gone, the first fix resolved both issues.
• If duplicates still show up, add a console.log('Exporting PDF...') in the export function to check if it fires multiple times in your browser's console.

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