如何通过按钮触发JavaScript过滤含Mapping Error/Squad Error大于0的表格行

Got it, let's solve this problem step by step. Here's a clean, working solution to add a button that filters your table to only show rows with errors in either the Mapping Error or Squad Error columns:

1. Add the Filter Button #

First, place this button somewhere above or next to your table (it'll trigger the filter logic when clicked):

<button id="filterErrorsBtn">Filter Rows with Errors</button>

If you want a way to reset the filter and show all rows again, add a second button too:

<button id="resetFilterBtn">Show All Rows</button>

2. JavaScript Filter Logic #

Add this script to your page (either in a <script> tag at the bottom of your HTML body or an external JS file):

// Filter button functionality
document.getElementById('filterErrorsBtn').addEventListener('click', function() {
  // Grab all rows from the target table's tbody
  const tableRows = document.querySelectorAll('.FILTER tbody tr');
  
  tableRows.forEach(row => {
    // Get the cells for Mapping Error (5th column, index 4) and Squad Error (6th column, index 5)
    const mappingErrorCell = row.cells[4];
    const squadErrorCell = row.cells[5];
    
    // Convert cell text to numbers (handle non-numeric values gracefully by defaulting to 0)
    const mappingError = parseInt(mappingErrorCell.textContent.trim(), 10) || 0;
    const squadError = parseInt(squadErrorCell.textContent.trim(), 10) || 0;
    
    // Show the row if either error value is greater than 0; hide it otherwise
    row.style.display = (mappingError > 0 || squadError > 0) ? '' : 'none';
  });
});

// Reset button functionality (optional)
document.getElementById('resetFilterBtn').addEventListener('click', function() {
  const tableRows = document.querySelectorAll('.FILTER tbody tr');
  // Set all rows back to their default display state
  tableRows.forEach(row => row.style.display = '');
});

3. How This Works #

• Button Binding: We attach click event listeners to the buttons to trigger the filter/reset actions.
• Row Selection: We target only rows inside the <tbody> of your .FILTER table to avoid modifying the header rows.
• Error Value Parsing: We convert the text content of the error columns to numbers, using || 0 to handle any unexpected non-numeric values (like empty cells).
• Display Control: We toggle the display CSS property of each row—showing rows that meet the error condition, hiding those that don't.

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