如何使用JavaScript遍历HTML表格并根据单元格值添加图标

Got it, let's fix this up. Here's a straightforward way to loop through your table cells and inject the right arrow icons based on whether the cell says "Up" or "Down":

Step-by-Step Implementation #

First, we'll wait for the page to fully load (so we don't try to manipulate elements that don't exist yet), then target only the non-header table rows, and process each cell one by one.

Option 1: Using Image Files #

If you have actual arrow image files (like up-arrow.png and down-arrow.png), use this code:

document.addEventListener('DOMContentLoaded', function() {
  // Grab the table by its ID
  const targetTable = document.getElementById('table');
  // Get all rows except the header row (the one with class "header")
  const dataRows = targetTable.querySelectorAll('tr:not(.header)');

  dataRows.forEach(row => {
    // Loop through each cell in the row
    const cells = row.querySelectorAll('td');
    cells.forEach(cell => {
      // Clean up the cell text (remove extra spaces)
      const cellContent = cell.textContent.trim();
      
      // Create the appropriate arrow image
      let arrowIcon;
      if (cellContent === 'Up') {
        arrowIcon = document.createElement('img');
        arrowIcon.src = 'up-arrow.png'; // Replace with your image's actual path
        arrowIcon.alt = 'Upward arrow';
        arrowIcon.style.marginLeft = '6px'; // Optional: Add space between text and icon
      } else if (cellContent === 'Down') {
        arrowIcon = document.createElement('img');
        arrowIcon.src = 'down-arrow.png'; // Replace with your image's actual path
        arrowIcon.alt = 'Downward arrow';
        arrowIcon.style.marginLeft = '6px';
      }

      // Add the icon to the cell if we created one
      if (arrowIcon) {
        cell.appendChild(arrowIcon);
        
        // If you want to replace the text with the icon instead (no text, just icon), use:
        // cell.textContent = '';
        // cell.appendChild(arrowIcon);
      }
    });
  });
});

Option 2: Using Unicode Arrows (No Image Files Needed) #

If you don't want to deal with image files, you can use Unicode arrow characters instead—this is lighter and works without extra assets:

document.addEventListener('DOMContentLoaded', function() {
  const targetTable = document.getElementById('table');
  const dataRows = targetTable.querySelectorAll('tr:not(.header)');

  dataRows.forEach(row => {
    row.querySelectorAll('td').forEach(cell => {
      const cellContent = cell.textContent.trim();
      
      if (cellContent === 'Up') {
        // Append an upward arrow to the cell text (styled green for contrast)
        cell.innerHTML += ' <span style="color: green;">↑</span>';
      } else if (cellContent === 'Down') {
        // Append a downward arrow (styled red for contrast)
        cell.innerHTML += ' <span style="color: red;">↓</span>';
      }
    });
  });
});

Key Notes #

• Trimming Text: We use trim() to handle cells with extra spaces (like <td> Up </td>) so our checks for "Up" and "Down" work reliably.
• Header Exclusion: The tr:not(.header) selector ensures we don't modify the header cells (the ones with "A", "B", "C").
• Styling: Feel free to adjust the marginLeft, color, or other styles to match your site's design.

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