JSFiddle - React, Tailwind, and code Playground

by Trevor Power

HTML

<div class="test">

  <span>outside table</span>

  <table data-signature="none">
    <tr data-signature="none">
      <td><span>non-signed table/row</span></td>
    </tr>
    <tr data-signature="valid">
      <td><span>signed row</span></td>
    </tr>
    <tr data-signature="invalid">
      <td><span>invalid row</span></td>
    </tr>
  </table>

  <table data-signature="valid">
    <tr data-signature="none">
      <td><span>signed table</span></td>
    </tr>
    <tr data-signature="valid">
      <td><span>signed row/table</span></td>
    </tr>
  </table>
  
  <table>
    <tr>
      <td><span>normal table</span></td>
    </tr>
  </table>
  
  <span>outside table</span>
  
</div>

CSS

table {
  border-collapse: collapse;
  margin:5px;
}

table,
th,
td {
  border: 1px solid black;
}

JavaScript

$('span').each(function() {
  var $span = $(this);
  if ($span.is('[data-signature]:not([data-signature=none]) span')) {
    $span.css('background-color', 'pink');
  } else {
    $span.css('background-color', 'lightgreen');
  }
});