求助：实现表格选中不同值的同时多色高亮功能

Hey there! I see you’ve got a working table selection highlight setup, but you’re stuck on assigning unique colors to different cell values. Let’s fix that—here’s a straightforward approach tailored to your jQuery setup:

Step 1: Define Value-to-Color Mappings & CSS Styles #

First, create CSS classes for each value-specific highlight, and map those values to their respective classes in your JS. This keeps your code clean and easy to update later.

/* Optional base style for unrecognized values */
.highlight-fallback {
  background-color: #f0f0f0;
}

/* Custom highlight classes for each value */
.highlight-apple {
  background-color: #ffcccc; /* Light red for "Apple" */
}
.highlight-banana {
  background-color: #fff3cd; /* Light yellow for "Banana" */
}
.highlight-orange {
  background-color: #ffeeba; /* Light orange for "Orange" */
}

Step 2: Update Your jQuery Selection Logic #

Modify your existing click handler to check the cell’s value, remove any old highlight classes, and apply the correct one based on your mapping:

// Map your target values to their highlight classes
const valueHighlightMap = {
  "Apple": "highlight-apple",
  "Banana": "highlight-banana",
  "Orange": "highlight-orange"
};

// Adjust the selector to match your table's cells (e.g., ".my-table td")
$("td").on("click", function() {
  const $cell = $(this);
  // Toggle the selected state
  $cell.toggleClass("selected");
  
  // Clear all existing highlight classes first
  $cell.removeClass(Object.values(valueHighlightMap).join(" ") + " highlight-fallback");
  
  // If the cell is selected, apply the right highlight
  if ($cell.hasClass("selected")) {
    const cellValue = $cell.text().trim();
    const highlightClass = valueHighlightMap[cellValue];
    
    if (highlightClass) {
      $cell.addClass(highlightClass);
    } else {
      // Fallback for values not in your map
      $cell.addClass("highlight-fallback");
    }
  }
});

How This Works #

• Flexible Mapping: The valueHighlightMap lets you add/remove value-color pairs without rewriting core logic—just update the object and add a corresponding CSS class.
• Clean State Management: We remove all highlight classes before applying a new one to avoid style conflicts.
• Fallback Support: Any value not in your map gets a default highlight, so you won’t have unhighlighted selected cells.

You can tweak the CSS colors, value strings, and table selectors to match your exact setup. If you need help adapting this to your existing code, just share a snippet of what you’ve got so far!

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