如何统计第三方HTML表格中指定唯一十六进制颜色值的数量

Hey Florian, here's a practical frontend solution to count your specified color codes in the target HTML table and output the results into a new table—no need to access the backend PHP scripts:

Step 1: Define your target color mappings #

First, we'll map each hex color to its corresponding category and initialize a counter for each:

// Map hex colors to their category names
const colorCategories = {
  '#FF8C00': '火灾',
  '#FD0202': '医疗救助',
  '#19070B': '危险物品',
  '#4876FF': '其他',
  '#0000FF': '技术援助'
};

// Initialize count tracker for each color
const colorCounter = Object.fromEntries(
  Object.keys(colorCategories).map(hex => [hex, 0])
);

Step 2: Scan the target table and count colors #

We'll traverse the table cells, extract their color (handling both hex and RGB formats), and increment the counter for matching colors. You'll need to adjust the table selector (#target-table) to match the actual table on the site:

// Get all cells from the target table (update selector as needed)
const tableCells = document.querySelectorAll('#target-table td');

// Helper function to convert RGB color strings to hex format
function rgbToHex(rgbStr) {
  if (!rgbStr || rgbStr === 'transparent') return '';
  const rgbMatch = rgbStr.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  if (!rgbMatch) return rgbStr.toUpperCase(); // Return hex directly if already in format
  
  const toHex = num => parseInt(num).toString(16).padStart(2, '0');
  return `#${toHex(rgbMatch[1])}${toHex(rgbMatch[2])}${toHex(rgbMatch[3])}`.toUpperCase();
}

// Loop through cells and count matching colors
tableCells.forEach(cell => {
  // Adjust this line if color is in text color instead of background: cell.style.color
  const cellColor = rgbToHex(cell.style.backgroundColor);
  
  if (colorCounter.hasOwnProperty(cellColor)) {
    colorCounter[cellColor]++;
  }
});

Step 3: Generate the results table #

Finally, we'll create a new table with the counts and append it to the page (you'll see it at the bottom):

// Create results table
const resultsTable = document.createElement('table');
resultsTable.border = '1';
resultsTable.style.marginTop = '20px';

// Add header row
const headerRow = resultsTable.insertRow();
['颜色类型', '十六进制颜色', '数量'].forEach(headerText => {
  const headerCell = document.createElement('th');
  headerCell.textContent = headerText;
  headerRow.appendChild(headerCell);
});

// Populate results data
Object.entries(colorCounter).forEach(([hexColor, count]) => {
  const row = resultsTable.insertRow();
  
  // Category cell
  const categoryCell = row.insertCell();
  categoryCell.textContent = colorCategories[hexColor];
  
  // Color cell (with visual preview)
  const colorCell = row.insertCell();
  colorCell.textContent = hexColor;
  colorCell.style.backgroundColor = hexColor;
  colorCell.style.color = hexColor === '#0000FF' ? 'white' : 'black'; // Improve readability for dark colors
  
  // Count cell
  const countCell = row.insertCell();
  countCell.textContent = count;
});

// Add table to the end of the page
document.body.appendChild(resultsTable);

How to use this: #

1. Open the target website and press F12 to open your browser's Developer Tools
2. Switch to the Console tab
3. Paste the entire code block and hit Enter
4. A new table with your color counts will appear at the bottom of the page

Notes: #

• If the color is applied via CSS classes instead of inline styles, modify the code to get the computed style (use getComputedStyle(cell).backgroundColor instead of cell.style.backgroundColor)
• Update the table selector (#target-table) to match the actual ID/class of the table on the site (e.g., use .my-table-class if it uses a class instead of ID)
• If the site has a strict Content Security Policy (CSP) blocking console scripts, use a userscript manager like Tampermonkey to inject the code instead

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