为隐藏式搜索表格添加复选框功能

Hey there! I see you're trying to add a checkbox to show/hide discontinued rows in your hidden search table—let's get this sorted for you step by step. Here's a straightforward implementation that works seamlessly with your existing code:

Step 1: Update the Checkbox HTML #

First, give your checkbox an ID and hook it up to a shared filtering function:

<input type="text" id="myInput" onkeyup="filterTable()" placeholder="Search by CODE...">
<input type="text" id="myInput2" onkeyup="filterTable()" placeholder="Search by Description...">
<span>
  <input type="checkbox" id="showDiscontinued" onchange="filterTable()">Show all Discontinued
</span>
<table id="marketing-table" style="table-layout: fixed;">
  <thead>
    <tr class="active-row">
      <th style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">Section</th>
      <th style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">CODE</th>
      <th style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">Description</th>
      <th style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">Sub Category</th>
      <th style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">Reason for Out of Stock</th>
      <th style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">Expected return date</th>
      <th style="background-color: #0087AE; color: white; text-align: center; vertical-align: middle;">Instruction for replacement</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Section Example 1</td>
      <td>123456</td>
      <td>Product Example 1</td>
      <td>Sub Cat Example 1</td>
      <td>Stock Available</td>
      <td>Stock Available</td>
      <td>Stock Available</td>
    </tr>
    <tr>
      <td>Section Example 2</td>
      <td>678910</td>
      <td>Product Example 2</td>
      <td>Sub Cat Example 2</td>
      <td>Manufacturer can't supply</td>
      <td>Manufacturer can't supply</td>
      <td>Order as normal, alternative supplier will deliver</td>
    </tr>
    <tr>
      <td>Section Example 3</td>
      <td>34567</td>
      <td>Product Example 3</td>
      <td>Sub Cat Example 3</td>
      <td>Manufacturer can't supply</td>
      <td>Manufacturer can't supply</td>
    </tr>
    <tr>
      <td>Section Example 4</td>
      <td>54321</td>
      <td>Product Example 4</td>
      <td>Sub Cat Example 4</td>
      <td>Discontinued</td>
      <td>Discontinued</td>
      <td>No direct replacement - overface with Stock available</td>
    </tr>
    <tr>
      <td>Section Example 5</td>
      <td>87654321</td>
      <td>Product Example 5</td>
      <td>Sub Cat Example 5</td>
      <td>Discontinued</td>
      <td>Discontinued</td>
      <td>No direct replacement - overface with Stock available</td>
    </tr>
  </tbody>
</table>

Step 2: Refactor JavaScript with a Shared Filter Function #

Instead of having separate functions for each search box, we'll create one unified filterTable() function that handles both search inputs and the checkbox state. This keeps your code clean and ensures all interactions work together:

window.onload = function() { 
  // Hide non-active rows on page load
  const rows = document.querySelectorAll('tr:not(.active-row)'); 
  for (let i = 0; i < rows.length; i++) { 
    rows[i].style.display = 'none'; 
  } 

  // Apply text color styling to status cells
  const elements = document.getElementsByTagName("td");
  for (let i = elements.length; i--;) { 
    if (elements[i].innerHTML === "Discontinued") elements[i].style.color = "red"; 
    if (elements[i].innerHTML === "Manufacturer can't supply") elements[i].style.color = "orange"; 
    if (elements[i].innerHTML === "Stock Available") elements[i].style.color = "green"; 
    if (elements[i].innerHTML === "N/A") {
      elements[i].style.color = "lightgrey"; 
      elements[i].style.background = "lightgrey"; 
    }
  }
}

// Unified filtering function
function filterTable() {
  const showDiscontinued = document.getElementById('showDiscontinued').checked;
  const codeFilter = document.getElementById('myInput').value.toUpperCase();
  const descFilter = document.getElementById('myInput2').value.toUpperCase();
  const table = document.getElementById('marketing-table');
  const rows = table.getElementsByTagName('tr');

  for (let i = 0; i < rows.length; i++) {
    // Skip the header row
    if (rows[i].classList.contains('active-row')) continue;

    const codeCell = rows[i].getElementsByTagName('td')[1];
    const descCell = rows[i].getElementsByTagName('td')[2];
    const statusCell = rows[i].getElementsByTagName('td')[4];
    let shouldDisplay = false;

    if (showDiscontinued) {
      // Show rows that match search filters OR are marked Discontinued
      const matchesSearch = 
        (codeFilter === '' || (codeCell && codeCell.innerHTML.toUpperCase().includes(codeFilter))) &&
        (descFilter === '' || (descCell && descCell.innerHTML.toUpperCase().includes(descFilter)));
      const isDiscontinued = statusCell && statusCell.innerHTML === 'Discontinued';
      shouldDisplay = matchesSearch || isDiscontinued;
    } else {
      // Show only rows that match search filters (hide all if filters are empty)
      if (codeFilter === '' && descFilter === '') {
        shouldDisplay = false;
      } else {
        const matchesCode = codeFilter === '' || (codeCell && codeCell.innerHTML.toUpperCase().includes(codeFilter));
        const matchesDesc = descFilter === '' || (descCell && descCell.innerHTML.toUpperCase().includes(descFilter));
        shouldDisplay = matchesCode && matchesDesc;
      }
    }

    rows[i].style.display = shouldDisplay ? '' : 'none';
  }
}

Step 3: Keep Your Existing CSS (No Changes Needed) #

Your current styling works perfectly, so you can leave it as is:

#myInput { background-image: url(); background-size: 25px; background-position: 10px 5px; background-repeat: no-repeat; width: 20%; font-size: 12px; padding: 12px 20px 12px 40px; border: thin solid #ddd; margin-bottom: 12px; }
#myInput2 { background-image: url(); background-size: 25px; background-position: 10px 5px; background-repeat: no-repeat; width: 20%; font-size: 12px; padding: 12px 20px 12px 40px; border: thin solid #ddd; margin-bottom: 12px; }
#marketing-table table { border-collapse: collapse; margin: 25px 0; font-size: 0.6em; min-width: 400px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); }
#marketing-table th { padding: 8px 10px; border-left: thin solid #dddddd; border-right: thin solid #dddddd; text-align: center; vertical-align: middle; font-size: 0.7em; }
#marketing-table td { padding: 8px 10px; border-left: thin solid #dddddd; border-right: thin solid #dddddd; text-align: center; vertical-align: middle; font-size: 0.6em; }
#marketing-table tbody tr.active-row { border-bottom: thin solid #dddddd; font-weight: bold; color: #0087AE; }

How It Works #

• Page Load: All non-header rows are hidden by default, matching your original behavior.
• Search Inputs: Typing in either search box triggers the filter function, showing rows that match both filters (or either if one input is empty).
• Checkbox Toggle: When checked, it displays all Discontinued rows plus any rows that fit your current search criteria. When unchecked, it reverts to showing only search-matching rows (or hides all rows if both search boxes are empty).

This approach keeps your code organized and ensures all interactions play nicely together—no more conflicting states between your search boxes and the checkbox!

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