如何基于单元格内特定数据为PHP/JavaScript表格单元格着色？

Absolutely, you can color table cells based on the data they contain! Here are two straightforward approaches depending on whether your table is static or dynamically generated:

Static Table (CSS Only) #

If your table is written directly in HTML, you can add custom classes to relevant cells and style them with CSS. For your example, we’ll target the "Available"/"Unavailable" status cells and even highlight the corresponding Person cell for clarity:

Modified HTML Table #

<table>
  <tr>
    <th>Person</th>
    <th>Info</th>
  </tr>
  <tr>
    <td rowspan="3" class="available-person">Person A</td>
    <td class="status available">Available</td>
  </tr>
  <tr>
    <td>Age: 10</td>
  </tr>
  <tr>
    <td>Weight: 110</td>
  </tr>
  <tr>
    <td rowspan="3" class="unavailable-person">Person B</td>
    <td class="status unavailable">Unavailable</td>
  </tr>
  <tr>
    <td>Age: 15</td>
  </tr>
  <tr>
    <td>Weight: 150</td>
  </tr>
  <tr>
    <td rowspan="3" class="available-person">Person C</td>
    <td class="status available">Available</td>
  </tr>
  <tr>
    <td>Age: 30</td>
  </tr>
  <tr>
    <td>Weight: 180</td>
  </tr>
</table>

CSS Styling #

/* Style status cells */
.status.available {
  background-color: #d4edda;
  color: #155724;
}

.status.unavailable {
  background-color: #f8d7da;
  color: #721c24;
}

/* Optional: Highlight the corresponding Person cell */
.available-person {
  background-color: #e8f5e9;
}

.unavailable-person {
  background-color: #ffebee;
}

Dynamic Table (JavaScript) #

If your table is generated dynamically (e.g., from a dataset), use JavaScript to automatically detect the status and apply styles:

// Get all status cells (adjust selector to match your table structure)
const statusCells = document.querySelectorAll('td.status');

statusCells.forEach(cell => {
  const status = cell.textContent.trim();
  
  if (status === 'Available') {
    cell.classList.add('available');
    // Target the rowspan Person cell for matching highlight
    const personCell = cell.parentElement.querySelector('td[rowspan]') || cell.parentElement.previousElementSibling?.querySelector('td');
    personCell?.classList.add('available-person');
  } else if (status === 'Unavailable') {
    cell.classList.add('unavailable');
    const personCell = cell.parentElement.querySelector('td[rowspan]') || cell.parentElement.previousElementSibling?.querySelector('td');
    personCell?.classList.add('unavailable-person');
  }
});

This script loops through each status cell, checks its content, and applies the appropriate CSS classes. Pair it with the CSS styles above for the colors to take effect.

Quick Notes #

• Adjust the CSS colors to match your desired design scheme.
• Tweak JavaScript selectors if your table structure differs slightly.
• For dynamic data updates (like filtering), wrap the logic in a reusable function that runs whenever the table changes.

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