需求：HTML表格匹配输入字符串的行自动置顶，替代点击选行操作

Got it, let's refactor your existing code to skip the manual row click and instead automatically move matching rows to the top when a user inputs a string. Here's a complete, practical implementation:

Step 1: Update the HTML (Add Input & Trigger) #

First, add an input field and a button to let users enter their search term and trigger the action. Make sure your table uses a <tbody> to wrap data rows (so we don't mess with the header):

<!-- Input controls -->
<input type="text" id="searchInput" placeholder="Enter text to match...">
<button id="moveBtn">Move Matching Row to Top</button>

<!-- Your existing table (with tbody for data rows) -->
<table id="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td>Red</td>
    </tr>
  </tbody>
</table>

Step 2: Replace Your JavaScript Logic #

Here's the updated JS that handles input matching, finds the row, and moves it to the top automatically:

// Get DOM elements once
const searchInput = document.getElementById('searchInput');
const moveBtn = document.getElementById('moveBtn');
const table = document.getElementById('table');
const tbody = table.querySelector('tbody');

// Function to handle matching and moving
function moveMatchingRowToTop() {
  const searchTerm = searchInput.value.trim().toLowerCase();
  
  // Exit if input is empty
  if (!searchTerm) {
    alert('Please enter a search term first!');
    return;
  }

  // Get all data rows
  const rows = tbody.querySelectorAll('tr');
  let matchingRow = null;

  // Loop through rows to find a match
  for (const row of rows) {
    // Check all cells in the row for the search term
    const cells = row.querySelectorAll('td');
    for (const cell of cells) {
      if (cell.textContent.trim().toLowerCase().includes(searchTerm)) {
        matchingRow = row;
        break; // Stop checking cells once a match is found in the row
      }
    }
    if (matchingRow) break; // Stop checking rows once a match is found
  }

  // Handle results
  if (matchingRow) {
    // Move the matching row to the top of the tbody
    tbody.insertBefore(matchingRow, tbody.firstChild);
    alert('Matching row moved to top!');
  } else {
    alert('No matching row found.');
  }
}

// Add event listeners
moveBtn.addEventListener('click', moveMatchingRowToTop);

// Optional: Allow pressing Enter to trigger the action
searchInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    moveMatchingRowToTop();
  }
});

Key Improvements & Explanations #

• No Manual Click Needed: The code now uses user input to find matches instead of relying on row selection.
• Case-Insensitive Matching: Converts both the search term and cell text to lowercase so matches work regardless of capitalization.
• Trimmed Input: Removes extra spaces from the input to avoid false negatives.
• Clear Feedback: Alerts the user if no match is found or if the action succeeds.
• Preserves Table Header: We target the <tbody> specifically, so your table header stays at the top.

Bonus: Handle Multiple Matching Rows #

If you want to move all matching rows to the top (instead of just the first), modify the loop to collect all matches and move them one by one:

function moveAllMatchingRowsToTop() {
  const searchTerm = searchInput.value.trim().toLowerCase();
  if (!searchTerm) {
    alert('Please enter a search term first!');
    return;
  }

  const rows = tbody.querySelectorAll('tr');
  const matchingRows = [];

  // Collect all matching rows
  for (const row of rows) {
    const cells = row.querySelectorAll('td');
    for (const cell of cells) {
      if (cell.textContent.trim().toLowerCase().includes(searchTerm)) {
        matchingRows.push(row);
        break;
      }
    }
  }

  if (matchingRows.length > 0) {
    // Move each matching row to the top (in reverse order to preserve their original relative order)
    matchingRows.reverse().forEach(row => {
      tbody.insertBefore(row, tbody.firstChild);
    });
    alert(`Moved ${matchingRows.length} matching rows to top!`);
  } else {
    alert('No matching rows found.');
  }
}

Just replace the moveMatchingRowToTop function with this one if you need multi-row support.

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