技术需求：隐藏含超链接的表格行，直至搜索匹配时显示

Got it, let's build this feature exactly as you described. Below is a complete, working implementation that checks all your boxes:

1. HTML Structure #

First, let's set up the search box and table with hyperlinks in each row. We'll keep all the <a> tags intact as required.

<input type="text" id="searchInput" placeholder="Search for items...">
<table id="targetTable">
  <thead>
    <tr>
      <th>Item Name</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="/items/supreme">Supreme Hoodie</a></td>
      <td><a href="/categories/apparel">Apparel</a></td>
    </tr>
    <tr>
      <td><a href="/items/nike">Nike Air Max</a></td>
      <td><a href="/categories/shoes">Shoes</a></td>
    </tr>
    <tr>
      <td><a href="/items/supreme-hat">Supreme Hat</a></td>
      <td><a href="/categories/accessories">Accessories</a></td>
    </tr>
  </tbody>
</table>

2. CSS Styling #

We'll hide all table rows by default using display: none—this ensures they don't take up any page space, unlike visibility: hidden which preserves the row's space.

#targetTable tbody tr {
  display: none;
}

3. JavaScript Logic #

We'll add a real-time event listener to the search box. On every input change, we'll filter rows that contain the search term (case-insensitive for better usability) and show only those matches.

const searchInput = document.getElementById('searchInput');
const tableRows = document.querySelectorAll('#targetTable tbody tr');

searchInput.addEventListener('input', function() {
  const searchTerm = this.value.trim().toLowerCase();
  
  tableRows.forEach(row => {
    // Get all text content from the row, including inside <a> tags
    const rowText = row.textContent.trim().toLowerCase();
    
    if (searchTerm === '') {
      // If search box is empty, hide all rows
      row.style.display = 'none';
    } else if (rowText.includes(searchTerm)) {
      // Show rows that match the search term
      row.style.display = 'table-row';
    } else {
      // Hide non-matching rows
      row.style.display = 'none';
    }
  });
});

• Default Hidden Rows: Using display: none in CSS ensures rows don't occupy any layout space until they're matched by a search.
• Real-Time Updates: The input event fires immediately as the user types, so results update without waiting for the search box to lose focus.
• Preserved Hyperlinks: We're only modifying the row's display property—all <a> tags remain in the HTML structure and work normally when rows are shown.
• Case Insensitivity: Converting both the search term and row text to lowercase ensures matches work regardless of how the user capitalizes their search.

You can drop this code into your existing project and adjust the table/input IDs to match your current setup. It should integrate smoothly with your existing development work!

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