HTML Element Style How to - Change Background Color based on innerText for a table cell

Question

We would like to know how to change Background Color based on innerText for a table cell.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
p[data-val="Yes"] {
  background-color: green;
}<!--  w  w w  .j  a  v a 2s  . c o m-->
</style>
</head>
<body>
  <table>
    <tr>
      <td>
        <p data-val="Yes">Yes</p>
      </td>
      <td>
        <p data-val="No">No</p>
      </td>
    </tr>
  </table>
</body>
</html>

The code above is rendered as follows: